Yandex kaardistab api 2.1 ülemineku. Kiirendus- ja optimeerimistööd
Oleme välja andnud Yandex.Maps 2.1 API beetaversiooni. Selle peamine omadus on kaardi liidese täielik ümberkujundamine. Pealegi mõjutasid muudatused mitte ainult välimus, aga ka kaardi juhtelementide käitumist. Kuna algselt oli selge, et tagasiühilduvuse riket ei saa vältida, siis tegime ka API jõudluse parandamiseks vajalikke arhitektuurilisi muudatusi (neist lähemalt postituse lõpus).
Disaini osas oli meie jaoks oluline, et liides näeks ühtviisi hea välja erineva suurusega seadmetel ja ekraanidel. Üks peamisi raskusi on see, et me ei tea kunagi ette, milline sisseehitatud kaartidega teenus või sait välja näeb. Seetõttu pidime ümberkujunduse väljatöötamisel püüdma pakkuda võimalikult palju võimalusi.
Oma probleemide lahendamiseks otsustasime uus versioon rakendada adaptiivset liidese disaini. Veel ühel konverentsil tegid disainer madhare ja arendaja zloylos ettekande, miks me vajame kohanemisvõimet ja kuidas me seda API-s täpselt rakendasime. Selles postituses kirjeldan meie lahenduste tausta ja kontseptsiooni, räägin sellest, mis on veel versioonis 2.1-beeta uut ja mis veel muutub 2.1 väljalaske jaoks.
Miks me disainile mõtleme? Pärast versiooni 2.0 väljaandmist kirjutasime juba postituse, milles rääkisime oma lähenemisest API arendamisele. Kontseptsiooni olemus seisneb selles, et me ei tee toodet mitte ainult arendajatele, vaid ka neile, kes kasutavad oma töö tulemusi. Kui inimesel on meie kaartide kasutamine mugav ja meeldiv ning ta nõuab neid oma lemmikteenustest, on see tõeline edu. Samas peaks arendajatel olema ka lihtne ja meeldiv kasutajate soove rahuldada, mis tähendab, et peame nende tööd API-ga nii palju kui võimalik lihtsustama. Neid mõtteid silmas pidades alustasime tööd versiooni 2.0 kallal ja uuest 2.1 beetaversioonist sai sama kontseptsiooni loogiline jätk. Uurimine Vaadeldes meie API installatsioone ja analüüsides kaartide kasutamise juhtumeid, tuvastasime kaks peamist tüüpi arendajaid.- Nad lahendavad tüüpilisi probleeme, ei taha kulutada palju aega ja eelistavad valmis Yandexi liideseid. See on ligikaudu 90%.
- Nad lahendavad ebastandardseid probleeme või eelistavad isegi standardprobleeme lahendada omal moel. Standardsed juhtnupud neile ei sobi. Vaja on kaartide tõsist kohandamist. Loogiline, et see on ülejäänud 10%.
Olles otsustanud vaatajaskonna üle, hakkasime uurima kasutusjuhtumeid. Selgus, et meie puhul on kummalisel kombel esmatähtis suurus. Saime 3+1 valikut: väikesed, keskmised, suured kaardi- ja mobiilisaidid.
Joonistame erineva suurusega kaartidele kujundusi. Kõige keerulisem on väikesed kaardid. Tundub, et kuna väike suurus Tasub eemaldada kõik kaardi juhtelemendid, kuid te ei taha ka funktsionaalsust kaotada. Seetõttu tegime eriti väikeste kaartide jaoks uued juhtelemendid:![](https://i1.wp.com/habrastorage.org/getpro/habr/post_images/fd9/4db/b8c/fd94dbb8cc71a17dc77ac50950755c5d.png)
Lisatud on ka uus juhtelement - "laienda kaarti täisekraanile". See säästab saidil ruumi, paigutades väikese kaardi ja lõppkasutajal on endiselt võimalus vaadata suur kaart. Kogu kaardi vajalik käitumine on API poolel juba programmeeritud. Üldiselt sündis selle nupu idee siis, kui mõtlesime sellele lahendusele mobiilseadmed. Mõistliku suurusega kaart töölaual võib mobiilseadmes täiesti kasutuks muutuda. Täisekraan lahendab selle probleemi:
Lisaks balunide disain väikesed suurused kart. Nüüd on väikestel kaartidel ja mobiilseadmete ekraanidel tavaline õhupall asendatud ekraani allservas oleva ribaga. See võimaldab hoida kaarti kasutajate jaoks informatiivsemana. Soovi korral saab selle valiku keelata.
Keskmiste kaartidega on kõik palju lihtsam. Sest ruumi on ümber pöörata:
Nagu suurte kaartide puhul:
Et arendajatel oleks kaardi juhtelementide valimine võimalikult lihtne, tegime erinevate kaardisuuruste jaoks kolm valmis komplekti.
map.controls.add("vaikimisi");
Saadaolevate võtmete loend:
smallMapDefaultSet // väikesele
mediumMapDefaultSet // normaalseks
largeMapDefaultSet // suurte jaoks
Vajalikud juhtelemendid saab muidugi ikkagi ise määrata.
myMap.controls .add("trafficControl") // traffic.add("searchControl") // search.add("zoomControl") // zoom control.add("typeSelector") // layers.add("geolocationControl " ) // geolocation.add("fullscreenControl") // täisekraan...
![](https://i0.wp.com/habrastorage.org/getpro/habr/post_images/61c/498/9ef/61c4989efad0de6d0816d68db7661242.png)
Rakendasime adaptiivse käitumise läbi control.Manager . Saate selle määrata ka nende nuppude ja loendite jaoks, mille loote ise.
Töötamise ajal oli meil aega selle tulemuste põhjal koodis veidi puhastada, siin on mikroleiud:
Mikrojäreldus 1. Käsitleja funktsiooni läbimisel on palju tulusam läbida funktsioon eraldi ja kontekst eraldi. Kui soovite kohe siduda, kaaluge, kas saate seda endale lubada.
Mikrojäreldus 2. Vähendage vahepealsete massiivide, objektide ja anonüümsete funktsioonide arvu. Neid ei puhasta prügivedaja alati hästi.
juhtimine.GeolocationControl(parameetrid) Samuti on täiustatud API-s kasutatavat kasutaja asukoha mehhanismi. Nüüd valitakse brauseri geograafilise asukoha ja IP-aadressi järgi geolokatsiooni hulgast automaatselt kõige täpsem tulemus.
- Klasterdaja muutub oluliselt.
- Map.action.Manager kirjutatakse ümber.
- Lubadused viiakse ellu vastavalt
Selles artiklis tahan alustada artiklite seeriat Yandex.Mapsi API-ga töötamise kohta. Yandex.Mapsi dokumentatsioon on üsna täielik, kuid selles sisalduva teabe killustatus on suur, kui te dokumentatsiooni esimest korda külastate, ei saa te seda ilma poole liitrita välja mõelda ja probleemi lahendada; võib kulutada palju aega dokumentatsiooni ja otsingumootori kaudu otsimisele. See artiklite seeria räägib praktilistest lahendustest kõige levinumate Yandex.Maps API kasutamise juhtumitele, mille kirjutamise ajal oli uusim versioon 2.1.
Kodulehe kontaktandmetesse paigutamisel on sageli vaja sisestada kaart, millele märgitakse selle organisatsiooni asukoht, mille jaoks veebisaiti arendatakse. Lihtsamal juhul võib see olla lihtsalt võrgukaartidelt (või mitte võrgus) pärit ekraanipilt:
Kaardikujundajat saab kasutada interaktiivse kaardi sisestamiseks
https://tech.yandex.ru/maps/tools/constructor/ :
Kui vajame kaartide täpsemat kasutamist (oma sildid, kaartide programmiline liikumine jne), siis selleks peame kasutama Yandex.Maps API-t: https://tech.yandex.ru/maps/jsapi/ . Kaartide kasutamise näitena käsitletakse selles artiklis kaardi loomist, lisades lihtsalt kohandatud sildi ja õhupalli.
Esiteks ühendame API komponendid:
Kui arendate kaartide abil suurt rakendust, on parem ühendada teatud versiooni API komponendid, nii et Yandexi poolel API värskendamisel ei puruneks tootmises midagi:
Kaart tuleb paigutada mõnda plokki, näiteks sisse div#kaart. Järgmisena tuleb selles plokis kaart luua (pärast kaardi ja DOM-i valmisoleku sündmuse käivitamist):
ymaps.ready(init); funktsioon init() ( var myMap; myMap = new ymaps.Map ("kaart" , ( keskpunkt: [ 55.76 , 37.64 ], suum: 7 ) ) ; ) |
Siin näitame:
Vaikimisi loob Yandex.Maps palju tarbetuid elemente, mida enamikul juhtudel veebisaitidel vaja ei lähe. Põhimõtteliselt piisab, kui rakendada juhtnuppudele ja kaardi käitumisele 2 tingimust:
Nende nõuete täitmiseks täiendame koodi:
ymaps.ready(init); funktsioon init() ( var myMap; myMap = new ymaps.Map ("kaart", ( keskel: [ 55.76, 37.64 ], suum: 13, juhtnupud: ) ) ; myMap.behaviors .disable ( "scrollZoom") ; myMap. controls.add("zoomControl" , ( asukoht: ( üleval: 15 , vasakul: 15 ) ) ; |
Siin oleme puudega "scrollZoom" ja lisas "zoomControl" asukohaga ülemisest vasakust nurgast.
Nüüd peame lisama artiklile kaardile nööpnõela, laadima selle pildi saidilt http://medialoot.com/item/free-vector-map-location-pins/ alla ja asetama selle koodi; järgmisel viisil:
ymaps.ready(init); funktsioon init() ( var myMap; myMap = new ymaps.Map ("kaart", ( keskel: [ 55.7652, 37.63836 ], suum: 17, juhtnupud: ) ) ; myMap.behaviors .disable ( "scrollZoom") ; myMap. juhtelemendid .add ( "zoomControl" , ( positsioon: ( üleval: 15 , vasakul: 15 ) ) ) var myPlacemark = new ymaps.Placemark ( [ 55.7649 , 37.63836 ] , ( ) , ( iconLayout: "H, ikoon" vaikimisi #imamage : , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] ) ) ) myMap.geoObjects .add (myPlacemark) ; |
Siin deklareerime muutuja myPlacemark, mille esimesse parameetrisse kirjutame markeri ymaps.Kohamärk Näitame märgi koordinaadid ja kolmandas parameetris:
Ja läbi myMap.geoObjects.add() lisage kaardile märk.
Nüüd teeme õhupalli, mis kuvatakse, kui klõpsate kaardisildil, võtame õhupalli paigutuse ja selle sisu aadressilt http://designdeck.co.uk/a/1241;
ymaps.ready(init); funktsioon init() ( var myMap; myMap = new ymaps.Map ("kaart", ( keskel: [ 55.7652, 37.63836 ], suum: 17, juhtnupud: ) ) ; myMap.behaviors .disable ( "scrollZoom") ; myMap. juhtelemendid .add ( "zoomControl" , ( asukoht: ( üleval: 15 , vasakul: 15 ) ) ; var html = "" html += " ![]() Victoria torni aiad " ; html += "" ; html += "Londoni linn " ; html += "" ; html += "Ühendkuningriik " ; html += "020 7641 5264 " ; html += "" ; html += "" ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( balloonContent: html ) , ( ikoonPaigutus: "vaikimisi#pilt" , ikoonImageHref: " http:// sait/failid/apiyamaps1/min_marker.png ", IconimageSize: [40, 51], IconimageOffset: [ - 20, - 47], BalloonLayout:" Vaikimisi#ImageWithContent ", BalloonContesze: [289, 151], BalloonimageHref:" Http: "Http:" Http: "Http:" Http: "Http:" //site/files/APIYaMaps1/min_popup.png" , balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false ) ) ; myjects.geomarke) |
Siin me:
Väljalaskekandidaat on API versioon, mis on avalikuks kasutamiseks saadaval, kuid on veel kinnitamisel. Enne väljalasekandidaadi installimist stabiilse versioonina testitakse seda kohe pärast selle väljalaskmist vigade suhtes, mis võivad põhjustada API funktsionaalsuse halvenemist. Kasutades oma projektides väljalaskekandidaate, saate aidata meil võimalikud vead õigeaegselt tuvastada. Saate oma rakenduse toimimist eeltestida ka API uue versiooniga.
Väljalaskekandidaate tuleks kasutada rakenduste arendus- ja testimiskeskkonnas. See aitab vältida vigu tootmiskeskkonnas. Saate lubada väljalaskekandidaadi järgmiselt.
Kui mõni aeg pärast väljalasekandidaadi avaldamist ei leita vigu, mis viivad funktsionaalsuse halvenemiseni, installitakse väljalasekandidaat API stabiilse versioonina ja sellele pääseb juurde lingi api-maps.yandex.ru/2.1 kaudu.
Praeguse versiooni lubamineRakenduse kasutamisel soovitame määrata põhiversiooni (st ärge määrake versiooni kolmandat numbrit). See tagab, et praegune versioon, st vastava põhiversiooni uusim stabiilne versioon, lülitatakse automaatselt sisse. Näiteks kui määrate versiooni 2.1, lubatakse uusim saadaolev stabiilne versioon 2.1.x (näiteks 2.1.47):
Määratud versiooni lubamine
Kuigi väikeversioonide vahel on täielik ühilduvus tagatud, võite harvadel juhtudel avastada, et teie klientrakendus ei tööta nii nagu ette nähtud, kui lubate uusima API versiooni. Nende olukordade vältimiseks peate võib-olla eriti kriitilistel juhtudel lubama konkreetse API versiooni. Selleks määrake selle number tervikuna:
jälgige API värskendusi ja lülituge niipea kui võimalik uuematele versioonidele.Kokkuvõttev tabel
Projekti tüüp Soovitatav versioon rakenduste käitamiseks Soovitatav versioon on väljatöötamisel | Keskmised ja suured projektid põhikaardiga |
|
Funktsionaalsuse testimiseks uusim versioon. | Keskmised ja suured keerukate kaardifunktsioonidega projektid |
|
Funktsionaalsuse testimiseks seadistage versioon. | Projektid, mis kasutavad API kommertsversiooni |
Määra versioon (vt allolevat märkust)
Märge.
Kui kasutate määratud versiooni, proovige seda regulaarselt uuemale versioonile vahetada. Asi on selles, et aja jooksul saame teie rakenduses kasutatava alaversiooni keelata ja seejärel lubatakse API praegune versioon automaatselt. Versioonivärskendus võib aga põhjustada teie rakenduse korrektse töötamise. Sel põhjusel soovitame teil API värskendusi jälgida ja esimesel võimalusel uuematele versioonidele üle minna.
29. aprillil 2014 teatati, et Yandex.Maps API 2.1 uus versioon lahkub beetaolekust ja nüüd saate sellele turvaliselt üle minna. Järgmistes postitustes kavatsen teile seda API versiooni tutvustada. Põhiline
— kaardiliideste uus adaptiivne disain;
— multiruuter — võimalus ehitada ühe marsruudi asemel kõik võimalikud marsruudid;
— modulaarne süsteem API. Kõikide API moodulite loend on toodud teatmeteoses.
— uus viis objektide kuvamine kaardil, mis võimaldab luua rohkem märke kui versioonis 2.0.
Üksikasjalikku dokumentatsiooni Yandex.Maps API 2.1 uue versiooni kohta saab lugeda.
Vaatame lihtsaimat näidet kaardi loomisest Yandex.Maps 2.1 API abil.
Siin on tema kood:
Lihtsaim näide kaardi loomine Yandex.Maps API 2.1 abil. var myMap; // Oodake, kuni API laaditakse ja DOM on valmis. ymaps.ready(init); function init () ( // Kaardi eksemplari loomine ja selle sidumine konteineriga // antud ID-ga ("kaart"). myMap = new ymaps.Map("map", ( // Kaardi lähtestamisel tuleb määrake // selle keskpunkt ja skaleerimisfaktor: , //. Nižni Novgorod suum: 12 )); )
Kohe alguses ühendame kaartide API aadressil http://api-maps.yandex.ru/
Vaatame parameetreid lähemalt:
lang – määratud kahe parameetriga language_region,
keel – kahekohaline keelekood. Näidatud sisse ISO formaat 639-1.
piirkond – kahekohaline riigikood. Määratud ISO 3166-1 formaadis.
Praegu toetatakse järgmisi lokaate:
lang=ru_RU;
lang=et_EE;
lang=ru_UA;
lang=uk_UA;
lang=tr_TR.
Täiendavaid parameetreid saab kasutada:
koordinaator – geograafiliste koordinaatide määramise järjekord API funktsioonides, mis aktsepteerivad sisendina pikkus-laiuskraadi paare (nt kohatähis).
Võimalikud väärtused:
latlong - [laiuskraad, pikkuskraad] - kasutatakse vaikimisi;
longlat – [pikkuskraad, laiuskraad].
Vaikeväärtus: latlong.
load — laaditud moodulite loend.
Vaikeväärtus: package.full.
režiim — API laadimisrežiim.
mode=release – API-koodi saab alla laadida pakendatud kujul, et minimeerida liiklust ja brauseri täitmiskiirust;
mode=debug – allalaadimisrežiim lähtekoodi kujul.
Vaikeväärtus: vabastamine.
Ühenduse parameetrite kohta saate rohkem lugeda
Kaardi kuvamiseks on määratud konteinerina, mille suurus ei ole null;
Kaardi parameetrid määratakse koodis:
myMap = new ymaps.Map('map', (
keskus: , // Nižni Novgorodi kaardi keskus
suum: 12 - suumitase
});
Peaksite looma kaardi pärast kogu veebilehe laadimist. See tagab, et kaardi konteiner on loodud ja sellele pääseb ligi ID-ga. Kaardi lähtestamiseks pärast lehe laadimist saate kasutada funktsiooni ready().
Valmis funktsioon kutsutakse välja, kui API laaditakse ja DOM on moodustatud
ymaps.ready(init);
funktsioon init() (
// Looge kaardi eksemplar ja siduge see konteineriga
// antud id ("kaart").
myMap = new ymaps.Map('map', (
// Kaardi lähtestamisel tuleb täpsustada
// selle keskpunkt ja skaleerimisfaktor.
keskus: , // Nižni Novgorod
suum: 12
});
Vaikimisi kuvatakse kaardil kõik saadaolevad juhtelemendid.
Kaardi tüüp - diagramm.
API pakub viit sisseehitatud kaarditüüpi:
Skeem (yandex#map) - vaikimisi;
satelliit (yandex#satellite);
Hübriid (yandex # hübriid);
Rahvakaart (yandex#publicMap);
Avaliku kaardi hübriid (yandex#publicMapHybrid).
Näide kaardi tüübi määramisest Satelliit
Näidiskood:
Valime kaardi tüübi – satelliit. Näide kaardi loomisest Yandex.Maps API 2.1 abil. body, html ( polster: 0; veeris: 0; laius: 100%; kõrgus: 100%; ) var myMap; // Oodake, kuni API laaditakse ja DOM on valmis. ymaps.ready(init); function init () ( // Kaardieksemplari loomine ja selle sidumine konteineriga // antud ID-ga ("kaart"). myMap = new ymaps.Map("map", ( // Kaardi lähtestamisel tuleb määrake // selle keskpunkt ja suumitegur: , // Nižni Novgorodi suum: 12, tüüp: "yandex#satellite" )).
Nagu ma juba ütlesin, lisatakse vaikimisi kaardile vaikimisi juhtelementide komplekt "mediumMapDefaultSet".
Kaardile vajalike juhtelementide lisamiseks saate juhtelementide parameetris selle loomisel määrata vastavate võtmete loendi.
Siin on näidiskood kaardi mõõtkava ja tüübi juhtelementide jaoks.
Näidiskood:
body, html ( polster: 0; veeris: 0; laius: 100%; kõrgus: 100%; ) |
Kaardi juhtnupud. Näide kaardi loomisest Yandex.Maps API 2.1 abil. body, html ( polster: 0; veeris: 0; laius: 100%; kõrgus: 100%; ) var myMap; // Oodake, kuni API laaditakse ja DOM on valmis. ymaps.ready(init); function init () ( // Kaardi eksemplari loomine ja selle sidumine konteineriga // antud ID-ga ("kaart"). myMap = new ymaps.Map("map", ( // Kaardi lähtestamisel tuleb määrake // selle keskpunkt ja suumitegur: , // Nižni Novgorodi suum: 12, juhtnupud: ["zoomControl", "typeSelector"] ));
Kaardi käitumist on võimalik määrata käitumise parameetri abil.
Selle väärtuste määramisega saame lubada või keelata erinevaid kaardi käitumise parameetreid:
suumi kaarti topeltklõpsuga hiirenupuga;
kaardi lohistamine hiire või ühe puutega;
kaardi suumimine, kui valite ala hiire vasaku nupuga;
suumi kaarti multi-touch puute abil;
kaardi suumimine ala valimisel hiire parema nupuga;
kauguse mõõtmine;
kaardi suumimine hiirerattaga.
Näidiskood, kus hiireratta suum on keelatud.
body, html ( polster: 0; veeris: 0; laius: 100%; kõrgus: 100%; ) |
Kaardi käitumise juhtimine. Näide kaardi loomisest Yandex.Maps API 2.1 abil. body, html ( polster: 0; veeris: 0; laius: 100%; kõrgus: 100%; ) var myMap; // Oodake, kuni API laaditakse ja DOM on valmis. ymaps.ready(init); function init () ( // Kaardi eksemplari loomine ja selle sidumine konteineriga // antud ID-ga ("kaart"). myMap = new ymaps.Map("map", ( // Kaardi lähtestamisel tuleb määrake // selle keskpunkt ja suumitegur: , // Nižni Novgorodi suum: 12 ));
Kaardi parameetreid on võimalik muuta pärast selle loomist.
Lubage suumimine hiirerattaga
myMap.behaviors.enable("scrollZoom");
Lülita välja
myMap.behaviors.disable("scrollZoom");
Installige uut tüüpi Narodnaja kaardid
myMap.setType('yandex#publicMap');
Uue kaardikeskuse seadistamine
Praeguseks kõik.
Jätkub…