„Yandex“ žemėlapių api 2.1 perėjimas

Šiame straipsnyje noriu pradėti straipsnių seriją apie darbą su Yandex.Maps API. „Yandex.Maps“ dokumentacija yra gana išsami, tačiau joje esančios informacijos suskaidymo laipsnis yra didelis, kai pirmą kartą įvedate dokumentaciją be pusės litro, negalite to suprasti, o norėdami išspręsti problemą, galite išleisti daug laiko ieškant dokumentuose ir paieškos sistemoje. Šioje straipsnių serijoje bus kalbama apie praktinius sprendimus, susijusius su dažniausiai pasitaikančiais naujausios, šio rašymo metu, 2.1 versijos Yandex.Maps API naudojimo atvejais.

Dėl svetainės išdėstymo kontaktinėje informacijoje dažnai reikia įterpti žemėlapį, kuriame bus pažymėta organizacijos, kuriai svetainė kuriama, vieta. Paprasčiausiais atvejais tai gali būti tik ekrano kopija iš internetinių žemėlapių (arba ne internete):

Dėl įdėklo interaktyvus žemėlapis Galima naudoti žemėlapių kūrimo priemonę
https://tech.yandex.ru/maps/tools/constructor/ :

Jei mums reikia pažangesnio žemėlapių naudojimo (savo etiketės, programinio žemėlapių judėjimo ir kt.), tada tam turime naudoti Yandex.Maps API: https://tech.yandex.ru/maps/jsapi/ . Kaip žemėlapių naudojimo pavyzdį, šiame straipsnyje bus nagrinėjamas žemėlapio kūrimas, paprastai pridedant pasirinktinę etiketę ir balioną.

Pirmiausia sujunkite API komponentus:

Jei naudojant žemėlapius kuriama didelė programa, geriau prijungti tam tikros versijos API komponentus, kad atnaujinant API „Yandex“ pusėje gamyboje niekas nenutrūktų:

Žemėlapį reikės įdėti į kokį nors bloką, pavyzdžiui, į div#žemėlapis. Toliau šiame bloke turi būti sukurtas žemėlapis (suaktyvinus žemėlapio ir DOM parengties įvykį):

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("žemėlapis" , ( centras: [ 55.76 , 37.64 ] , mastelio keitimas: 7 ) ) ; )

Čia nurodome:

  1. bloko identifikatorius žemėlapį, kur kursime žemėlapį;
  2. centras— žemėlapio centras, nurodantis plotį ir ilgumą;
  3. priartinti— žemėlapio mastelio koeficientas.

Pagal numatytuosius nustatymus „Yandex.Maps“ sukuria daug nereikalingų elementų, kurių daugeliu atvejų svetainėse nereikia. Iš esmės valdikliams ir žemėlapio veikimui pakanka taikyti 2 sąlygas:

  1. iš žemėlapio elementų yra tik mastelio keitimo slankiklis;
  2. žemėlapis neturėtų būti padidintas naudojant pelės slinktį.

Norėdami įvykdyti šiuos reikalavimus, papildome kodą:

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("žemėlapis" , ( centras: [ 55.76 , 37.64 ] , mastelio keitimas: 13 , valdikliai: ) ) ; myMap.behaviors .disable ("scrollZoom") ; myMap. valdikliai .add ("zoomControl" , ( padėtis: ( viršuje: 15 , kairėje: 15 ) ) ; )

Čia mes esame neįgalūs slinkties mastelio keitimas ir pridėjo "Mastelio keitimas" pastatytas iš viršutinio kairiojo kampo.

Dabar prie žemėlapio turime pridėti etiketę, nes straipsniui atsisiųsime jo vaizdą iš http://medialoot.com/item/free-vector-map-location-pins/ ir įdėsime į kodą taip:

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("žemėlapis" , ( centras: [ 55.7652 , 37.63836 ] , mastelio keitimas: 17 , valdikliai: ) ) ; myMap.behaviors .disable ("scrollZoom" ) valdikliai .add ("zoomControl" , ( padėtis: ( viršuje: 15 , kairėje: 15 ) ) ) ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( ) , ( iconLayout: "default,#imamage" : , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] ) ) ; myMap.geoObjects .add (myPlacemark) ; )

Čia deklaruojame kintamąjį myPlacemark, kuriame įrašome žymeklį, pirmame parametre ymaps.Vietos žymeklis nurodykite etiketės koordinates, o trečiajame parametre:

  1. nurodyti piktogramos išdėstymas kad bus naudojamas tinkintos etiketės vaizdas;
  2. iconImageHref- kelias į vaizdą;
  3. piktogramaVaizdo dydis- nurodyti vaizdo dydį;
  4. iconImageOffset- nurodome poslinkį iš viršutinio kairiojo paveikslo kampo į vaizdo tašką, kurį nukreipiame į mums reikalingą objektą. Tai būtina, kad padidinus žemėlapio mastelį etiketės padėtis nenuklystų. Kodėl poslinkis nurodomas neigiamomis reikšmėmis - API kūrėją žino tik Dievas.

Ir per myMap.geoObjects.add() pridėti žymeklį prie žemėlapio.

O dabar padarykime balioną, kuris bus rodomas paspaudus žemėlapio etiketę, baliono maketą ir jo turinį paimsime iš http://designdeck.co.uk/a/1241

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("žemėlapis" , ( centras: [ 55.7652 , 37.63836 ] , mastelio keitimas: 17 , valdikliai: ) ) ; myMap.behaviors .disable ("scrollZoom" ) valdikliai .add ("zoomControl" , ( padėtis: ( viršuje: 15 , kairėje: 15 ) ) ) ; var html = "
"; html += "" ; html +="
"; html += "

Viktorijos bokšto sodai

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

Londono miestas

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

Jungtinė Karalystė

" ; 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 ] , balionas:VaizdasHref "http://site/files/APIYaMaps1/min_popup.png", balionasImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balionasShadow: false ) ) ; myMap.geoObjects .add (myPlacemark) ; )

Mes esame čia:

  1. in balionasTurinys nurodyti turinį, kuris bus rodomas atidarius balioną;
  2. baliono išdėstymas- nurodykite, kad pasirinktinis vaizdas bus naudojamas kaip baliono maketas;
  3. balionasContentSize ir balionasImageSize— atitinkamai turinio ir vaizdų dydžiai;
  4. balionasImageHref- kelias į vaizdą;
  5. balionasImageOffset- poslinkis viršutinio kairiojo kampo atžvilgiu;
  6. balionasŠešėlis— išjungti baliono šešėlį (tai neturi įtakos pasirinktiniams vaizdams).

Galimybė išleisti yra API versija, kurią galima naudoti viešai, tačiau ji vis dar tvirtinama. Prieš įdiegiant leidimo kandidatą kaip stabilią versiją, kai tik ji išleidžiama, ji patikrinama, ar nėra klaidų, dėl kurių gali pablogėti API funkcijos. Savo projektuose naudodami kandidatus į leidimą galite padėti mums laiku nustatyti galimas klaidas. Taip pat galite iš anksto išbandyti savo programos veikimą naudodami naują API versiją.

Kandidatai į leidimą turėtų būti naudojami programų kūrimo ir testavimo aplinkoje. Tai padės išvengti klaidų gamybos aplinkoje. Galite įgalinti leidimo kandidatą taip:



Pačioje pradžioje sujungiame žemėlapių API adresu http://api-maps.yandex.ru/

Pažvelkime į parinktis išsamiau:

lang – nustatoma dviem parametrais language_region,

kalba – dviženklis kalbos kodas. Nurodyta ISO 639-1 formatu.
regionas – dviženklis šalies kodas. Nurodyta ISO 3166-1 formatu.

Įjungta Šis momentas palaikomos šios lokalės:

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

Galima naudoti papildomas parinktis:

koordinatorius – tvarka, kuria geografinės koordinatės nurodomos API funkcijose, kurios priima ilgumos ir platumos poras kaip įvestį (pavyzdžiui, vietos žymeklis).

Galimos reikšmės:

latlong – [platuma, ilguma] – naudojamas pagal numatytuosius nustatymus;
longlat – [ilguma, platuma].

Numatytoji vertė: latlong.

įkelti – įkeliamų modulių sąrašas.

Numatytoji reikšmė: package.full.

režimas – API įkėlimo režimas.

mode=release – API kodą galima atsisiųsti supakuotą, kad būtų sumažintas srautas ir vykdymo greitis naršyklėje;
mode=debug – atsisiuntimo režimas kaip šaltinio kodas.

Numatytoji reikšmė: paleidimas.

Skaitykite daugiau apie ryšio parinktis

Žemėlapiui rodyti nurodomas ne nulinio dydžio konteineris, bet koks bloko tipo HTML elementas gali būti naudojamas kaip konteineris, pavyzdyje tai div.

Žemėlapio parametrai nustatomi kode:

myMap = naujas ymaps.Map('žemėlapis', (
centras: , // Nižnij Novgorodo žemėlapio centras
priartinimas: 12 – priartinimo lygis
});

Žemėlapis turėtų būti sukurtas įkėlus visą tinklalapį. Taip įsitikinsite, kad žemėlapio konteineris buvo sukurtas ir jį galima pasiekti naudojant ID. Norėdami inicijuoti žemėlapį po puslapio įkėlimo, galite naudoti funkciją ready().

Paruošta funkcija bus iškviesta, kai bus įkelta API ir sugeneruotas DOM.

ymaps.ready(init);

funkcija init()(
// Sukurkite žemėlapio egzempliorių ir susiekite jį su konteineriu
// suteiktas ID („žemėlapis“).
myMap = naujas ymaps.Map('žemėlapis', (
// Pradėdami žemėlapį, turite nurodyti
// jo centras ir mastelio koeficientas.
centras: , // Nižnij Novgorodas
priartinimas: 12
});

Pagal numatytuosius nustatymus žemėlapyje rodomi visi galimi valdikliai.

Žemėlapio tipas – schema.

API pateikia penkis integruotus žemėlapių tipus:

Schema (yandex#map) – pagal numatytuosius nustatymus;
Palydovas (yandex#satellite);
Hibridas (yandex#hibridas);
Žmonių žemėlapis (yandex#publicMap);
Nacionalinio žemėlapio hibridas (yandex#publicMapHybrid).

Pavyzdys, kaip nustatyti žemėlapio tipą Palydovas

Kodo pavyzdys:

Už žemėlapio tipas - Palydovas. Žemėlapio kūrimo naudojant Yandex.Maps API 2.1 pavyzdys.



Kaip jau sakiau anksčiau, numatytasis „mediumMapDefaultSet“ valdiklių rinkinys pridedamas prie žemėlapio pagal numatytuosius nustatymus.

Norėdami į žemėlapį įtraukti reikiamus valdiklius, kurdami žemėlapį valdymo elementų parametre galite nurodyti atitinkamų klavišų sąrašą.

Čia yra žemėlapio mastelio ir tipo valdiklių kodo pavyzdys.

Kodo pavyzdys:

Žemėlapio valdikliai. Žemėlapio kūrimo naudojant Yandex.Maps API 2.1 pavyzdys.



Galima nustatyti žemėlapio elgseną naudojant elgesio parametrą.

Nustatydami jo reikšmes, galime įjungti arba išjungti įvairias žemėlapio veikimo parinktis:

žemėlapio mastelio keitimas dukart spustelėjus pelės mygtuką;

žemėlapio vilkimas pele arba vienu prisilietimu;

žemėlapio mastelio keitimas renkantis sritį kairiuoju pelės mygtuku;

žemėlapio mastelio keitimas kelių palietimų paspaudimu;

žemėlapio mastelio keitimas renkantis sritį dešiniuoju pelės mygtuku spustelėkite pelėms;

atstumo matavimas;

žemėlapio mastelio keitimas pelės ratuku.

Kodo pavyzdys, kai išjungtas pelės ratuko priartinimas.

Žemėlapio elgesio kontrolė. Žemėlapio kūrimo naudojant Yandex.Maps API 2.1 pavyzdys.



Sukūrus žemėlapio parametrus galima keisti.

Įjunkite pelės ratuko priartinimą

myMap.behaviors.enable("scrollZoom");

Išjunk

myMap.behaviors.disable("scrollZoom");

Diegiame naujo tipo žemėlapį Folk

myMap.setType('yandex#publicMap');

Naujo žemėlapių centro nustatymas

Tai kol kas viskas.

Tęsinys…

Panašūs įrašai