Yandex žemėlapių api 2.1. Greitinimo ir optimizavimo darbai

2014 m. balandžio 29 d. buvo paskelbta, kad naujoji Yandex.Maps API 2.1 versija nebėra beta versija, todėl dabar galite saugiai pereiti prie jos.

Keliose kitose pastabose ketinu jus supažindinti su šia API versija.

Pagrindiniai skiriamieji Yandex.Maps JavaScript API 2.1 versijos bruožai:

— naujas adaptyvus žemėlapių sąsajų dizainas;

- multirouter - galimybė sukurti visus įmanomus maršrutus vietoj vieno;

- modulinė API sistema. Visų API modulių sąrašas pateikiamas nuorodoje.

- naujas būdas rodyti objektus žemėlapyje, leidžiantis sukurti daugiau etikečių nei 2.0 versijoje.

Galima perskaityti išsamią dokumentaciją apie naują Yandex.Maps API 2.1 versiją.

Pažiūrėkime į paprasčiausią žemėlapio kūrimo naudojant Yandex.Maps 2.1 API pavyzdį.

Štai jo kodas:

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.

Šiuo metu 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ė: leidimas.

Skaitykite daugiau apie ryšio parinktis

Žemėlapiui rodyti nurodomas ne nulinio dydžio konteineris, kaip konteineris gali būti naudojamas bet koks bloko tipo HTML elementas, 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į įkėlus puslapį, 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', (
// Inicijuojant žemėlapį reikia 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:

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:

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ų lietimų paspaudimu;

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

atstumo matavimas;

žemėlapio mastelio keitimas pelės ratuku.

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

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…

Galimas leidimas 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:

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į):

Č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ą:

Č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:

Č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 darysime 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 ] , balloonShadow: false ) ) ; myMap.geoObjects .add (myPlacemark) ; )

Mes esame čia:

1. v 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- baliono šešėlio išjungimas (tai neturi įtakos pasirinktiniams vaizdams).