Tranzicioni i hartave Yandex api 2.1

Në këtë artikull, unë dua të filloj një seri artikujsh për të punuar me API Yandex.Maps. Dokumentacioni Yandex.Maps është mjaft i plotë, por shkalla e fragmentimit të informacionit në të është e lartë, kur futni dokumentacionin për herë të parë pa gjysmë litri, nuk mund ta kuptoni dhe për të zgjidhur një problem, mund të shpenzoni një shumë kohë duke kërkuar nëpër dokumentacion dhe në një motor kërkimi. Kjo seri artikujsh do të flasë për zgjidhje praktike për rastet më të zakonshme të përdorimit të API-së Yandex.Maps të versionit 2.1 më të fundit, në kohën e këtij shkrimi.

Kur vendosni një faqe në informacionin e kontaktit, shpesh është e nevojshme të futni një hartë në të cilën do të shënohet vendndodhja e organizatës për të cilën po zhvillohet siti. Në rastet më të thjeshta, kjo mund të jetë vetëm një pamje e ekranit nga hartat në internet (ose jo në internet):

Për futje harta interaktive mund të përdoret ndërtuesi i hartave
https://tech.yandex.ru/maps/tools/constructor/:

Nëse kemi nevojë për një përdorim më të avancuar të hartave (etiketat tona, lëvizja programore e hartave, etj.), Atëherë për këtë duhet të përdorim API-në Yandex.Maps: https://tech.yandex.ru/maps/jsapi/ . Si shembull se si të përdoren hartat, ky artikull do të shikojë krijimin e një harte me shtimin e thjeshtë të një etikete dhe tullumbace të personalizuar.

Së pari, le të lidhim komponentët e API:

Nëse një aplikacion i madh po zhvillohet duke përdorur harta, atëherë është më mirë të lidhni përbërësit API të një versioni të caktuar në mënyrë që kur përditësoni API në anën Yandex, asgjë të mos prishet në prodhim:

Harta do të duhet të vendoset në një bllok, për shembull në div# hartë. Më pas, harta duhet të krijohet në këtë bllok (pasi të aktivizohet ngjarja e gatishmërisë së hartës dhe DOM):

Këtu tregojmë:

1. identifikues blloku harta, ku do të krijojmë një hartë;
2. qendër- qendra e hartës që tregon gjerësinë dhe gjatësinë;
3. zmadhimi— faktori i shkallës së hartës.

Si parazgjedhje, Yandex.Maps krijon shumë elementë të panevojshëm, të cilët në shumicën e rasteve nuk nevojiten në faqet e internetit. Në thelb, mjafton të aplikoni 2 kushte për kontrollet dhe për sjelljen e hartës:

1. nga elementët e hartës, është i pranishëm vetëm rrëshqitësi i zmadhimit;
2. harta nuk duhet të zmadhohet me lëvizjen e miut.

Për të përmbushur këto kërkesa, ne plotësojmë kodin:

Këtu kemi paaftë zmadhimi lëviz dhe shtoi "kontrolli i zmadhimit" pozicionuar nga këndi i sipërm majtas.

Tani duhet të shtojmë një etiketë në hartë, për artikullin do të shkarkojmë imazhin e saj nga http://medialoot.com/item/free-vector-map-location-pins/ dhe do ta vendosim në kod si më poshtë:

Këtu ne deklarojmë një ndryshore marka e vendit tim, në të cilën shkruajmë shënuesin, në parametrin e parë ymaps.Placemark specifikoni koordinatat e etiketës dhe në parametrin e tretë:

1. tregoni në iconLayout që do të përdoret një imazh i etiketës me porosi;
2. iconImageHref- rruga drejt imazhit;
3. iconImageSize- specifikoni madhësinë e figurës;
4. iconImageOffset- ne tregojmë zhvendosjen nga këndi i sipërm i majtë i figurës në pikën e figurës, të cilën e drejtojmë te objekti që na nevojitet. Kjo është e nevojshme në mënyrë që kur harta të shkallëzohet, pozicioni i etiketës të mos devijojë. Pse kompensimi tregohet në vlera negative - vetëm Zoti e di krijuesin e API.

Dhe përmes myMap.geoObjects.add() shtoni një shënues në hartë.

Dhe tani le të bëjmë një tullumbace që do të shfaqet kur të klikojmë në etiketën e hartës, do të marrim paraqitjen e balonës dhe përmbajtjen e saj nga http://designdeck.co.uk/a/1241

ymaps.ready(init) ; funksioni init() (var myMap; myMap = new ymaps.Map ("harta" , ( qendër: [ 55.7652 , 37.63836 ] , zmadhimi: 17 , kontrollet: ) ) ; myMap.behaviors .çaktivizoj ("scrollZoom;) kontrollet .add ("zoomControl" , ( pozicioni: ( lart: 15 , majtas: 15 ) ) ; var html = " "; html += "" ; html +=" "; html += " Kopshtet e Kullës Victoria " ; html += "" ; html +=" Qyteti i Londrës " ; html += "" ; html += " Mbretëria e Bashkuar "; html +=" 020 7641 5264 "; html +=" "; html +=" " ; var myPlacemark = ymaps i ri.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 Imagon: refo H "http://site/files/APIYaMaps1/min_popup.png", balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , BalloonShadow: false ) ; myMap.geoObjects .add (myPlacemark) ; )

Ne jemi këtu:

1. në Përmbajtja e balonës specifikoni përmbajtjen që do të shfaqet kur të hapet balona;
2. Struktura e balonave- specifikoni që një imazh i personalizuar do të përdoret si plan urbanistik;
3. Balona ContentSize dhe madhësia e imazhit të balonës— madhësitë e përmbajtjes dhe imazheve, përkatësisht;
4. ballonImageHref- rruga drejt imazhit;
5. ballonImageOffset- kompensimi në lidhje me këndin e sipërm të majtë;
6. tullumbace Hije— çaktivizimi i hijes së balonës (nuk ndikon asgjë me imazhet e personalizuara).

Një kandidat për lëshim është një version i API, i cili është i disponueshëm për përdorim publik, por është ende nën miratim. Përpara se të instaloni kandidatin e lëshimit si një version të qëndrueshëm, sapo të lëshohet, ai testohet për gabime që mund të çojnë në degradimin e funksionalitetit të API. Duke përdorur kandidatët e lëshimit në projektet tuaja, ju mund të na ndihmoni të identifikojmë me kohë gabimet e mundshme. Ju gjithashtu mund të testoni paraprakisht funksionimin e aplikacionit tuaj me një version të ri të API-së.

Kandidatët e lëshimit duhet të përdoren në mjedisin e zhvillimit dhe testimit të aplikacionit. Kjo do t'ju ndihmojë të shmangni gabimet në mjedisin e prodhimit. Ju mund të aktivizoni një kandidat për lirim si më poshtë:

Në fillim, ne lidhim API-në e hartave në http://api-maps.yandex.ru/

Le të shohim opsionet në më shumë detaje:

lang - caktuar nga dy parametra language_region,

gjuha - kodi dyshifror i gjuhës. Specifikuar në formatin ISO 639-1.
rajoni - kodi dyshifror i shtetit. Specifikuar në formatin ISO 3166-1.

Në ky moment lokalet e mëposhtme mbështeten:

lang=ru_RU;
lang=en_SHBA;
lang=ru_UA;
gjuha=uk_UA;
lang=tr_TR.

Mund të përdoren opsione shtesë:

koordinatori - renditja në të cilën specifikohen koordinatat gjeografike në funksionet API që pranojnë çifte gjatësi-gjerësi gjeografike si hyrje (për shembull, Placemark).

Vlerat e mundshme:

latlong - [gjerësia, gjatësia] - përdoret si parazgjedhje;
longlat - [gjatësi, gjerësi gjeografike].

Vlera e parazgjedhur: latlong.

load - Lista e moduleve për t'u ngarkuar.

Vlera e paracaktuar: paketë.plotë.

modaliteti - modaliteti i ngarkimit të API.

mode=release - Kodi API mund të shkarkohet në formë të paketuar për të minimizuar trafikun dhe shpejtësinë e ekzekutimit në shfletues;
mode=debug - modaliteti i shkarkimit si kod burimor.

Vlera e parazgjedhur: lirim.

Lexoni më shumë rreth opsioneve të lidhjes

Për të shfaqur hartën, specifikohet një kontejner me madhësi jo zero, çdo element HTML i tipit bllok mund të përdoret si kontejner, në shembullin është div.

Parametrat e hartës janë vendosur në kod:

myMap = ymaps.Hartë e re ('hartë', (
qendra: , // qendra e hartës së Nizhny Novgorod
zmadhimi: 12 - niveli i zmadhimit
});

Harta duhet të krijohet pasi të jetë ngarkuar e gjithë faqja e internetit. Kjo do të sigurojë që kontejneri për hartën të jetë krijuar dhe të mund të aksesohet me ID. Për të inicializuar hartën pasi të jetë ngarkuar faqja, mund të përdorni funksionin gati().

Funksioni gati do të thirret kur API të jetë ngarkuar dhe DOM të jetë gjeneruar.

ymaps.ready(init);

funksioni init()(
// Krijoni një shembull të hartës dhe lidheni atë me kontejnerin me
// ID e dhënë ("hartë").
myMap = ymaps.Hartë e re ('hartë', (
// Gjatë inicializimit të hartës, duhet të specifikoni
// qendra e saj dhe faktori i shkallës.
qendër: , // Nizhny Novgorod
zmadhimi: 12
});

Si parazgjedhje, harta shfaq të gjitha kontrollet e disponueshme.

Lloji i hartës - skema.

API ofron pesë lloje hartash të integruara:

Skema (yandex#map) - si parazgjedhje;
Satelit (yandex#satellite);
Hibrid (yandex#hybrid);
Harta e njerëzve (yandex#publicMap);
Hibrid i hartës kombëtare (yandex#publicMapHybrid).

Shembull me përcaktimin e llojit të hartës Satelitore

Shembull i kodit:

Siç thashë më parë, grupi i parazgjedhur i kontrolleve 'mediumMapDefaultSet' shtohet në hartë si parazgjedhje.

Për të shtuar kontrollet e nevojshme në hartë, mund të specifikoni një listë të çelësave përkatës në parametrin e kontrolleve kur krijoni hartën.

Këtu është kodi shembull për kontrollet e shkallës dhe tipit të hartës.

Shembull i kodit:

Është e mundur të vendosni sjelljen e hartës duke përdorur parametrin e sjelljeve.

Duke vendosur vlerat e saj, ne mund të aktivizojmë ose çaktivizojmë opsione të ndryshme për sjelljen e hartës:

shkallëzimi i hartës duke klikuar dy herë butonin e miut;

zvarritja e hartës me miun ose me prekje të vetme;

shkallëzimi i hartës kur zgjidhni një zonë me butonin e majtë të miut;

shkallëzimi i hartës me një prekje me shumë prekje;

shkallëzimi i hartës kur zgjidhni një zonë klikoni me të djathtën minj;

matja e distancës;

zmadhimi i hartës me rrotën e miut.

Shembull kodi me zmadhimin e rrotave të miut të çaktivizuar.

Është e mundur të ndryshohen parametrat e një harte pasi të jetë krijuar.

Aktivizo zmadhimin e rrotave të miut

myMap.behaviors.enable("scrollZoom");

Fike

myMap.behaviors.disable("scrollZoom");

Instalimi i një lloji të ri të hartës Folk

myMap.setType('yandex#publicMap');

Vendosja e një qendre të re harte

Kjo është e gjitha për tani.

Vazhdon…