Yandex maps api 2.1 prijelaz

U ovom članku želim započeti seriju članaka o radu s Yandex.Maps API-jem. Dokumentacija Yandex.Mapsa je prilično kompletna, ali je stepen fragmentiranosti informacija u njoj visok; kada prvi put uđete u dokumentaciju bez pola litre, ne možete to shvatiti, a da biste riješili problem, možete potrošiti puno vremena pretražujući dokumentaciju i tražilicu. Ova serija članaka govorit će o praktičnim rješenjima za najčešće slučajeve korištenja Yandex.Maps API-ja najnovije, u vrijeme pisanja ovog teksta, verzije 2.1.

Prilikom postavljanja stranice u kontakt informacije, često je potrebno umetnuti mapu na kojoj će biti označena lokacija organizacije za koju se stranica razvija. U najjednostavnijim slučajevima, ovo može biti samo snimak ekrana sa online mapa (ili ne na mreži):

Za umetak interaktivna karta Map builder se može koristiti
https://tech.yandex.ru/maps/tools/constructor/ :

Ako nam je potrebna naprednija upotreba karata (naše vlastite oznake, programsko kretanje karata itd.), onda za to trebamo koristiti Yandex.Maps API: https://tech.yandex.ru/maps/jsapi/ . Kao primjer korištenja mapa, ovaj članak će se osvrnuti na kreiranje karte s jednostavnim dodavanjem prilagođene oznake i balona.

Prvo, spojimo API komponente:

Ako se neka velika aplikacija razvija pomoću mapa, onda je bolje povezati API komponente određene verzije tako da se pri ažuriranju API-ja na strani Yandex-a ništa ne prekida u proizvodnji:

Mapa će se morati postaviti u neki blok, na primjer u div#map. Zatim se mapa mora kreirati u ovom bloku (nakon što se pokrene događaj spremnosti mape i DOM-a):

ymaps.ready(init) ; funkcija init() ( var myMap; myMap = new ymaps.Map ("mapa" , ( centar: [ 55.76 , 37.64 ] , zumiranje: 7 ) ) ;)

Ovdje ukazujemo:

  1. identifikator bloka mapa, gdje ćemo kreirati mapu;
  2. centar— centar karte koji označava širinu i dužinu;
  3. zum— faktor razmere karte.

Podrazumevano, Yandex.Maps stvara mnogo nepotrebnih elemenata, koji u većini slučajeva nisu potrebni na web stranicama. U osnovi, dovoljno je primijeniti 2 uvjeta na kontrole i na ponašanje karte:

  1. od elemenata karte prisutan je samo klizač za zumiranje;
  2. mapu ne treba zumirati pomicanjem miša.

Da bismo ispunili ove zahtjeve, dopunjavamo kod:

ymaps.ready(init) ; funkcija init() ( var myMap; myMap = nova ymaps.Map ("mapa" , ( centar: [ 55.76 , 37.64 ] , zumiranje: 13 , kontrole: ) ) ; myMap.behaviors .disable ("scrollZoom." ) ; kontrole .add ("zoomControl" , ( pozicija: ( gore: 15 , lijevo: 15 ) ) ; )

Ovdje smo onemogućili scrollzoom i dodao "kontrola zuma" pozicioniran iz gornjeg lijevog ugla.

Sada moramo dodati oznaku na kartu, za članak ćemo preuzeti njenu sliku sa http://medialoot.com/item/free-vector-map-location-pins/ i postaviti je u kod na sljedeći način:

ymaps.ready(init) ; funkcija init() ( var myMap; myMap = new ymaps.Map ("map" , ( centar: [ 55.7652 , 37.63836 ] , zumiranje: 17 , kontrole: ) ) ; myMap.behaviors .disable ("scrollZoom; myMap" . kontrole .add ("zoomControl" , ( pozicija: ( gore: 15 , lijevo: 15 ) ) ) ; var myPlacemark = novi ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( ) , ( iconLayout: "defa" : , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] ) ) ; myMap.geoObjects .add (myPlacemark) ;)

Ovdje deklariramo varijablu myPlacemark, u koji upisujemo marker, u prvi parametar ymaps.Placemark navedite koordinate oznake, au trećem parametru:

  1. naznačiti u iconLayout da će se koristiti slika prilagođene oznake;
  2. iconImageHref- put do slike;
  3. iconImageSize- odredite veličinu slike;
  4. iconImageOffset- označavamo pomak od gornjeg lijevog ugla slike do tačke slike koju pokazujemo na predmet koji nam je potreban. Ovo je neophodno kako kada se mapa skalira, pozicija oznake ne bi zalutala. Zašto je pomak naznačen u negativnim vrijednostima - samo Bog zna tvorca API-ja.

I kroz myMap.geoObjects.add() dodajte marker na kartu.

A sada ćemo napraviti balon koji će se prikazati kada kliknemo na oznaku karte, preuzet ćemo izgled balona i njegov sadržaj sa http://designdeck.co.uk/a/1241

ymaps.ready(init) ; funkcija init() ( var myMap; myMap = new ymaps.Map ("map" , ( centar: [ 55.7652 , 37.63836 ] , zumiranje: 17 , kontrole: ) ) ; myMap.behaviors .disable ("scrollZoom; myMap" . kontrole .add ("zoomControl" , ( pozicija: ( gore: 15 , lijevo: 15 ) ) ) ; var html = "
"; html += "" ; html +="
"; html += "

Victoria Tower Gardens

" ; html += "" ; html +="

City of London

" ; html += "" ; html += "

ujedinjeno kraljevstvo

" ; html += "

020 7641 5264

" ; html += "
" ; html += "
" ; var myPlacemark = novi ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( balloonContent: html ) , ( iconLayout: "default#image" , iconImageHref: "http://site/files/APIYaMaps1/min_marker.png", iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] , balloonLayout: "default#imageWithContent" , balloonContentSize: [ 289 , 151 ] , balloonImage "http://site/files/APIYaMaps1/min_popup.png", balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false ) ) ; myMap.geoObjects .add (myPlacemark) ; )

Mi smo tu:

  1. in balloonContent odrediti sadržaj koji će biti prikazan kada se balon otvori;
  2. balloonLayout- navedite da će se prilagođena slika koristiti kao izgled balona;
  3. balloonContentSize i balloonImageSize— veličine sadržaja i slika;
  4. balloonImageHref- put do slike;
  5. balloonImageOffset- pomak u odnosu na gornji lijevi ugao;
  6. balloonShadow— onemogućavanje senke balona (ne utiče ni na šta sa prilagođenim slikama).

Kandidat za izdanje je verzija API-ja, koja je dostupna za javnu upotrebu, ali je još uvijek pod odobrenjem. Prije instaliranja kandidata za izdanje kao stabilne verzije, čim se objavi, testira se na greške koje mogu dovesti do degradacije API funkcionalnosti. Koristeći kandidate za izdanje u svojim projektima, možete nam pomoći da na vrijeme identificiramo potencijalne greške. Također možete unaprijed testirati rad svoje aplikacije s novom verzijom API-ja.

Kandidati za izdanje trebaju se koristiti u okruženju za razvoj i testiranje aplikacije. Ovo će vam pomoći da izbjegnete greške u proizvodnom okruženju. Kandidata za izdavanje možete omogućiti na sljedeći način:



Na samom početku povezujemo API mapa na http://api-maps.yandex.ru/

Pogledajmo opcije detaljnije:

lang - postavljen sa dva parametra language_region,

jezik - dvocifreni kod jezika. Specificirano u ISO 639-1 formatu.
region - dvocifreni kod zemlje. Specificirano u ISO 3166-1 formatu.

Na ovog trenutka podržane su sljedeće lokacije:

lang=ru_RU;
lang=en_US;
lang=ru_UA;
lang=uk_UA;
lang=tr_TR.

Mogu se koristiti i dodatne opcije:

coordorder - redosled kojim su geografske koordinate navedene u API funkcijama koje prihvataju parove geografske dužine i širine kao ulaz (na primer, oznaka mesta).

Moguće vrijednosti:

latlong - [latitude, longitude] - koristi se po defaultu;
longlat - [dužina, širina].

Zadana vrijednost: latlong.

load - Lista modula za učitavanje.

Zadana vrijednost: package.full.

mod - način učitavanja API-ja.

mode=release - API kod se može preuzeti u zapakovanom obliku kako bi se minimizirao promet i brzina izvršavanja u pretraživaču;
mode=debug - način preuzimanja kao izvorni kod.

Zadana vrijednost: release.

Pročitajte više o opcijama povezivanja

Za prikaz mape naveden je kontejner veličine koja nije nula, bilo koji HTML element tipa bloka može se koristiti kao kontejner, u primjeru je div.

Parametri karte su postavljeni u kodu:

myMap = new ymaps.Map('map', (
centar: , // centar karte Nižnjeg Novgoroda
zumiranje: 12 - nivo zumiranja
});

Mapu treba kreirati nakon što se učita cijela web stranica. Ovo će osigurati da je kontejner za mapu kreiran i da mu se može pristupiti putem id-a. Da biste inicijalizirali mapu nakon što se stranica učita, možete koristiti funkciju ready().

Ready funkcija će biti pozvana kada se API učita i DOM se generira.

ymaps.ready(init);

funkcija init()(
// Kreirajte instancu mape i povežite je sa kontejnerom sa
// dati id ("mapa").
myMap = new ymaps.Map('map', (
// Kada inicijalizirate mapu, morate specificirati
// njegov centar i faktor skale.
centar: , // Nižnji Novgorod
zumiranje: 12
});

Podrazumevano, mapa prikazuje sve dostupne kontrole.

Vrsta karte - shema.

API pruža pet ugrađenih tipova mapa:

Shema (yandex#map) - po defaultu;
Satelit (yandex#satellite);
Hibrid (yandex#hybrid);
Mapa ljudi (yandex#publicMap);
Hibrid nacionalne karte (yandex#publicMapHybrid).

Primjer sa određivanjem tipa karte Satelit

Primjer koda:

Iza mape tip - Satelit. Primjer kreiranja karte koristeći Yandex.Maps API 2.1.



Kao što sam već rekao, podrazumevani skup kontrola 'mediumMapDefaultSet' se podrazumevano dodaje na mapu.

Da biste dodali potrebne kontrole na kartu, možete navesti listu odgovarajućih ključeva u parametru kontrola prilikom kreiranja karte.

Ovdje je primjer koda za kontrole razmjera i tipa karte.

Primjer koda:

Kontrole karte. Primjer kreiranja karte koristeći Yandex.Maps API 2.1.



Moguće je podesiti ponašanje karte pomoću parametra ponašanja.

Postavljanjem njegovih vrijednosti možemo omogućiti ili onemogućiti različite opcije za ponašanje mape:

skaliranje karte dvostrukim klikom na tipku miša;

prevlačenje karte mišem ili jednim dodirom;

skaliranje karte pri odabiru područja lijevom tipkom miša;

skaliranje karte pomoću višestrukog dodira;

skaliranje karte prilikom odabira područja desni klik miševi;

mjerenje udaljenosti;

zumiranje karte pomoću točkića miša.

Primjer koda sa onemogućenim zumiranjem kotačića miša.

Kontrola ponašanja karte. Primjer kreiranja karte koristeći Yandex.Maps API 2.1.



Moguće je promijeniti parametre karte nakon što je kreirana.

Uključite zumiranje točkića miša

myMap.behaviors.enable("scrollZoom");

Ugasiti

myMap.behaviors.disable("scrollZoom");

Instalacija novog tipa mape Folk

myMap.setType('yandex#publicMap');

Postavljanje novog centra za mape

To je sve za sada.

Nastavlja se…

Slični postovi