Yandex maps api 2.1 prehod

V tem članku želim začeti serijo člankov o delu z API-jem Yandex.Maps. Dokumentacija Yandex.Maps je precej popolna, vendar je stopnja razdrobljenosti informacij v njej visoka, ko prvič vnesete dokumentacijo brez pol litra, je ne morete ugotoviti, za rešitev težave pa lahko porabite veliko časa za iskanje po dokumentaciji in v iskalniku. Ta serija člankov bo govorila o praktičnih rešitvah najpogostejših primerov uporabe API-ja Yandex.Maps najnovejše, v času tega pisanja, različice 2.1.

Pri postavitvi spletnega mesta v kontaktne podatke je pogosto treba vstaviti zemljevid, na katerem bo označena lokacija organizacije, za katero se spletno mesto razvija. V najpreprostejših primerih je to lahko samo posnetek zaslona iz spletnih zemljevidov (ali ne na spletu):

Za vložek interaktivni zemljevid lahko uporabite graditelj zemljevidov
https://tech.yandex.ru/maps/tools/constructor/ :

Če potrebujemo naprednejšo uporabo zemljevidov (lastne oznake, programsko premikanje zemljevidov itd.), potem moramo za to uporabiti API Yandex.Maps: https://tech.yandex.ru/maps/jsapi/ . Kot primer uporabe zemljevidov bo ta članek obravnaval ustvarjanje zemljevida s preprostim dodajanjem oznake po meri in oblačka.

Najprej povežimo komponente API-ja:

Če se neka velika aplikacija razvija z uporabo zemljevidov, je bolje povezati komponente API-ja določene različice, tako da se pri posodabljanju API-ja na strani Yandex nič ne prekine v proizvodnji:

Zemljevid bo treba postaviti v neki blok, na primer v div#zemljevid. Nato je treba zemljevid ustvariti v tem bloku (po sprožitvi dogodka pripravljenosti zemljevida in DOM):

Tukaj navajamo:

1. identifikator bloka zemljevid, kjer bomo izdelali zemljevid;
2. center— sredina zemljevida, ki označuje širino in dolžino;
3. povečava— faktor merila karte.

Yandex.Maps privzeto ustvari veliko nepotrebnih elementov, ki v večini primerov niso potrebni na spletnih mestih. V bistvu je dovolj, da uporabite 2 pogoja za kontrole in za obnašanje zemljevida:

1. od elementov zemljevida je prisoten samo drsnik za povečavo;
2. zemljevida ne smete povečati z miško.

Za izpolnitev teh zahtev dopolnjujemo kodo:

Tukaj smo onemogočili scrollzoom in dodal "kontrola povečave" postavljeno od zgornjega levega kota.

Zdaj morate zemljevidu dodati oznako, za članek prenesite njegovo sliko s http://medialoot.com/item/free-vector-map-location-pins/ in jo postavite v kodo, kot sledi:

Tukaj deklariramo spremenljivko myPlacemark, v katerega vpišemo marker, v prvi parameter ymaps.Placemark določite koordinate oznake in v tretjem parametru:

1. navedite v iconLayout da bo uporabljena slika oznake po meri;
2. iconImageHref- pot do slike;
3. iconImageSize- določite velikost slike;
4. iconImageOffset- označimo premik od zgornjega levega kota slike do točke slike, ki jo usmerimo na predmet, ki ga potrebujemo. To je potrebno, da pri spreminjanju velikosti zemljevida položaj oznake ne zaide. Zakaj je odmik naveden v negativnih vrednostih - samo Bog pozna ustvarjalca API-ja.

In skozi myMap.geoObjects.add() dodajte oznako na zemljevid.

In zdaj naredimo balon, ki se bo pokazal, ko kliknemo na oznako zemljevida, vzeli bomo postavitev balona in njegovo vsebino iz http://designdeck.co.uk/a/1241

ymaps.ready(init); funkcija init() ( var myMap; myMap = new ymaps.Map ("zemljevid" , ( sredina: [ 55.7652 , 37.63836 ] , povečava: 17, kontrolniki: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. controls .add ("zoomControl" , ( position: ( top: 15 , left: 15 ) ) ; var html = " "; html += "" ; html +=" "; html += " Victoria Tower Gardens " ; html += "" ; html +=" Londonsko mesto " ; html += "" ; html += " Združeno kraljestvo "; html += " 020 7641 5264 "; html += " "; html += " " ; var myPlacemark = new 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 ] , balloonImageHref: "http://site/files/APIYaMaps1/min_popup.png", balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false ) ) ; myMap.geoObjects .add (myPlacemark) ; )

Tukaj smo:

1. v balloonContent določite vsebino, ki bo prikazana ob odpiranju oblačka;
2. balloonLayout- označite, da bo kot postavitev oblačka uporabljena slika po meri;
3. balloonContentSize in balloonImageSize— velikosti vsebine oziroma slik;
4. balonImageHref- pot do slike;
5. balloonImageOffset- zamik glede na zgornji levi kot;
6. balloonShadow— onemogočanje sence balona (pri slikah po meri ne vpliva na nič).

Kandidat za izdajo je različica API-ja, ki je na voljo za javno uporabo, vendar je še v postopku odobritve. Preden se kandidat za izdajo namesti kot stabilna različica, se takoj, ko je izdan, testira za napake, ki lahko povzročijo poslabšanje funkcionalnosti API-ja. Z uporabo kandidatov za izdajo v svojih projektih nam lahko pomagate pravočasno prepoznati morebitne napake. Prav tako lahko predhodno preizkusite delovanje svoje aplikacije z novo različico API-ja.

Kandidate za izdajo je treba uporabiti v okolju za razvoj in testiranje aplikacij. Tako se boste izognili napakam v produkcijskem okolju. Kandidata za izdajo lahko omogočite na naslednji način:

Na samem začetku povežemo API zemljevidov na http://api-maps.yandex.ru/

Oglejmo si možnosti podrobneje:

lang - nastavljen z dvema parametroma language_region,

jezik - dvomestna koda jezika. Določeno v formatu ISO 639-1.
regija - dvomestna koda države. Določeno v formatu ISO 3166-1.

Na ta trenutek podprti so naslednji lokali:

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

Uporabite lahko dodatne možnosti:

coordorder - vrstni red, v katerem so geografske koordinate določene v funkcijah API, ki sprejemajo pare zemljepisne dolžine in širine kot vhod (na primer oznaka položaja).

Možne vrednosti:

latlong - [geografska širina, dolžina] - uporabljeno privzeto;
longlat - [geografska dolžina, širina].

Privzeta vrednost: latlong.

nalaganje - seznam modulov za nalaganje.

Privzeta vrednost: package.full.

način - način nalaganja API-ja.

mode=release - kodo API lahko prenesete v pakirani obliki, da zmanjšate promet in hitrost izvajanja v brskalniku;
mode=debug - način prenosa kot izvorne kode.

Privzeta vrednost: sprostitev.

Preberite več o možnostih povezave

Za prikaz zemljevida je določen vsebnik velikosti, ki ni enaka nič, kot vsebnik se lahko uporabi kateri koli element HTML tipa bloka, v primeru je to div.

Parametri zemljevida so nastavljeni v kodi:

myMap = new ymaps.Map('zemljevid', (
središče: , // središče zemljevida Nižni Novgorod
povečava: 12 - stopnja povečave
});

Zemljevid je treba ustvariti, ko se naloži celotna spletna stran. S tem boste zagotovili, da je vsebnik za zemljevid ustvarjen in da je do njega mogoče dostopati z ID-jem. Za inicializacijo zemljevida, potem ko se stran naloži, lahko uporabite funkcijo ready().

Funkcija pripravljenosti bo poklicana, ko bo API naložen in DOM ustvarjen.

ymaps.ready(init);

funkcija init()(
// Ustvarite primerek zemljevida in ga povežite z vsebnikom z
// podani id ("zemljevid").
myMap = new ymaps.Map('zemljevid', (
// Pri inicializaciji zemljevida morate podati
// njegovo središče in faktor lestvice.
center: , // Nižni Novgorod
povečava: 12
});

Zemljevid privzeto prikazuje vse razpoložljive kontrole.

Vrsta karte - shema.

API nudi pet vgrajenih vrst zemljevidov:

Shema (yandex#map) - privzeto;
Satelit (yandex#satellite);
Hibrid (yandex#hybrid);
Zemljevid ljudi (yandex#publicMap);
Hibrid državnega zemljevida (yandex#publicMapHybrid).

Primer z določanjem vrste zemljevida Satelit

Primer kode:

Kot sem že rekel, je zemljevidu privzeto dodan privzeti nabor kontrolnikov 'mediumMapDefaultSet'.

Če želite zemljevidu dodati potrebne kontrolnike, lahko pri ustvarjanju zemljevida podate seznam ustreznih ključev v parametru kontrolnikov.

Tukaj je primer kode za nadzor merila zemljevida in vrste.

Primer kode:

Obnašanje zemljevida je mogoče nastaviti s parametrom obnašanja.

Z nastavitvijo njegovih vrednosti lahko omogočimo ali onemogočimo različne možnosti za obnašanje zemljevida:

spreminjanje velikosti zemljevida z dvojnim klikom miške;

vlečenje zemljevida z miško ali enim dotikom;

spreminjanje velikosti zemljevida pri izbiri območja z levim gumbom miške;

skaliranje zemljevida z večkratnim dotikom;

spreminjanje velikosti zemljevida pri izbiri območja desni klik miši;

merjenje razdalje;

povečevanje zemljevida z miškinim kolescem.

Primer kode z onemogočenim zoomom kolesca miške.

Po izdelavi zemljevida je možno spremeniti parametre.

Vklopite povečavo s kolescem miške

myMap.behaviors.enable("scrollZoom");

Ugasni

myMap.behaviors.disable("scrollZoom");

Namestitev nove vrste zemljevida Folk

myMap.setType('yandex#publicMap');

Postavitev novega središča zemljevida

To je vse za zdaj.

Se nadaljuje…