Prijelaz Yandex maps api 2.1

Ovim člankom želim započeti seriju članaka o radu s Yandex.Maps API-jem. Dokumentacija Yandex.Maps je prilično potpuna, ali stupanj fragmentacije informacija u njoj je visok, kada prvi put uđete u dokumentaciju bez pola litre, ne možete to shvatiti, a za rješavanje problema 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, verzije 2.1.

Prilikom postavljanja stranice u kontakt podatke često je potrebno umetnuti kartu na kojoj će biti označena lokacija organizacije za koju se stranica izrađuje. U najjednostavnijim slučajevima, to može biti samo snimka zaslona s mrežnih karata (ili neonline):

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

Ako trebamo napredniju upotrebu karata (vlastite oznake, programsko pomicanje karata itd.), onda za to trebamo koristiti Yandex.Maps API: https://tech.yandex.ru/maps/jsapi/ . Kao primjer korištenja karata, ovaj će se članak baviti stvaranjem karte jednostavnim dodavanjem prilagođene oznake i balona.

Prvo povežimo API komponente:

Ako se neka velika aplikacija razvija pomoću karata, onda je bolje povezati API komponente određene verzije tako da se prilikom ažuriranja API-ja na strani Yandexa ništa ne prekine u proizvodnji:

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

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

Ovdje navodimo:

  1. identifikator bloka karta, gdje ćemo izraditi kartu;
  2. centar— središte karte s oznakom širine i dužine;
  3. zum— faktor mjerila karte.

Prema zadanim postavkama, 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. karta se ne smije zumirati pomicanjem miša.

Kako bismo ispunili ove zahtjeve, dopunjujemo kod:

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

Ovdje smo onemogućili zumiranje pomicanja i dodao "kontrola zumiranja" postavljen od gornjeg lijevog kuta.

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

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

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

  1. navesti u iconLayout da će se koristiti prilagođena slika oznake;
  2. iconImageHref- put do slike;
  3. iconImageSize- odrediti veličinu slike;
  4. iconImageOffset- označavamo pomak od gornjeg lijevog kuta slike do točke slike, kojom pokazujemo na predmet koji nam je potreban. Ovo je neophodno kako prilikom skaliranja karte položaj oznake ne bi zalutao. Zašto je pomak naznačen u negativnim vrijednostima - samo Bog zna tvorca API-ja.

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

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

ymaps.ready(init) ; funkcija init() ( var myMap; myMap = new ymaps.Map ("map" , ( središte: [ 55.7652 , 37.63836 ] , zumiranje: 17, kontrole: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. kontrole .add ("zoomControl" , ( position: ( top: 15 , left: 15 ) ) ) ; var html = "
"; html += "" ; html +="
"; html += "

Vrtovi Viktorijinog tornja

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

Londonski grad

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

Ujedinjeno Kraljevstvo

" ; 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) ; )

Ovdje mi:

  1. u sadržaj balona odredite sadržaj koji će biti prikazan kada se balon otvori;
  2. balonLayout- odredite da će se prilagođena slika koristiti kao izgled balona;
  3. BalonContentSize i BalonImageSize— veličine sadržaja odnosno slika;
  4. balonImageHref- put do slike;
  5. balloonImageOffset- pomak u odnosu na gornji lijevi kut;
  6. balonSjena— onemogućavanje sjene balona (ne utječe ni na što s prilagođenim slikama).

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

Kandidate za izdanje treba koristiti u okruženju za razvoj i testiranje aplikacije. To će vam pomoći da izbjegnete pogreške u proizvodnom okruženju. Kandidata za izdanje možete omogućiti na sljedeći način:



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

Pogledajmo opcije detaljnije:

lang - postavljen pomoću dva parametra language_region,

jezik - dvoznamenkasti kod jezika. Specificirano u formatu ISO 639-1.
regija - dvoznamenkasti kod zemlje. Specificirano u formatu ISO 3166-1.

Na ovaj trenutak podržani su sljedeći lokaliteti:

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

Mogu se koristiti dodatne opcije:

coordorder - redoslijed kojim su geografske koordinate navedene u API funkcijama koje prihvaćaju parove zemljopisne dužine i širine kao ulaz (na primjer, oznaka mjesta).

Moguće vrijednosti:

latlong - [geografska širina, dužina] - koristi se prema zadanim postavkama;
longlat - [dužina, širina].

Zadana vrijednost: latlong.

load - Popis modula za učitavanje.

Zadana vrijednost: package.full.

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

mode=release - API kod se može preuzeti u pakiranom obliku kako bi se smanjio promet i brzina izvršenja u pregledniku;
mode=debug - način preuzimanja kao izvorni kod.

Zadana vrijednost: otpuštanje.

Pročitajte više o mogućnostima povezivanja

Za prikaz karte specificiran je spremnik veličine različite od nule, bilo koji HTML element blok tipa može se koristiti kao spremnik, u primjeru je to div.

Parametri karte postavljeni su u kodu:

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

Kartu treba izraditi nakon što se cijela web stranica učita. Ovo će osigurati da je spremnik za kartu stvoren i da mu se može pristupiti putem ID-a. Da biste inicijalizirali kartu nakon što se stranica učita, možete koristiti funkciju ready().

Funkcija Ready bit će pozvana kada se API učita i DOM generira.

ymaps.ready(init);

funkcija init()(
// Stvorite instancu mape i povežite je sa spremnikom sa
// dati ID ("karta").
myMap = new ymaps.Map('map', (
// Kada inicijalizirate kartu, morate navesti
// njegovo središte i faktor razmjera.
centar: , // Nižnji Novgorod
zumiranje: 12
});

Prema zadanim postavkama karta prikazuje sve dostupne kontrole.

Vrsta karte – shema.

API nudi pet ugrađenih vrsta karata:

Shema (yandex#map) - prema zadanim postavkama;
Satelit (yandex#satellite);
Hibrid (yandex#hybrid);
Karta ljudi (yandex#publicMap);
Hibrid nacionalne karte (yandex#publicMapHybrid).

Primjer s određivanjem vrste karte Satelit

Primjer koda:

Iza vrste karte - Satelit. Primjer izrade karte pomoću Yandex.Maps API 2.1.



Kao što sam već rekao, zadani skup kontrola 'mediumMapDefaultSet' dodaje se karti prema zadanim postavkama.

Kako biste dodali potrebne kontrole na kartu, možete navesti popis odgovarajućih ključeva u parametru kontrola prilikom izrade karte.

Ovdje je primjer koda za kontrolu mjerila i tipa karte.

Primjer koda:

Kontrole karte. Primjer izrade karte pomoću Yandex.Maps API 2.1.



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

Postavljanjem njegovih vrijednosti možemo omogućiti ili onemogućiti razne opcije za ponašanje karte:

skaliranje karte dvostrukim pritiskom na tipku miša;

povlačenje karte mišem ili jednim dodirom;

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

skaliranje karte s multi-touch dodirom;

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

mjerenje udaljenosti;

zumiranje karte kotačićem miša.

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

Kontrola ponašanja karte. Primjer izrade karte pomoću Yandex.Maps API 2.1.



Moguće je promijeniti parametre karte nakon što je izrađena.

Uključite zumiranje kotačićem miša

myMap.behaviors.enable("scrollZoom");

Isključiti

myMap.behaviors.disable("scrollZoom");

Instaliranje nove vrste karte Folk

myMap.setType('yandex#publicMap');

Postavljanje novog centra karte

To je sve za sada.

Nastavit će se…

Slični postovi