Yandex maps api 2.1 övergång

I den här artikeln vill jag starta en serie artiklar om att arbeta med Yandex.Maps API. Yandex.Maps-dokumentationen är ganska komplett, men graden av fragmentering av information i den är hög; när du först går in i dokumentationen utan en halv liter kan du inte räkna ut det, och för att lösa ett problem kan du spendera en mycket tid på att söka igenom dokumentationen och i sökmotorn. Den här artikelserien kommer att prata om praktiska lösningar på de vanligaste fallen av användning av Yandex.Maps API från den senaste versionen 2.1 när detta skrivs.

När man lägger ut en plats i kontaktinformation är det ofta nödvändigt att infoga en karta på vilken platsen för den organisation som sajten utvecklas för kommer att markeras. I de enklaste fallen kan detta bara vara en skärmdump från onlinekartor (eller inte online):

För insättning interaktiv karta kartbyggaren kan användas
https://tech.yandex.ru/maps/tools/constructor/ :

Om vi ​​behöver en mer avancerad användning av kartor (våra egna etiketter, programmatisk rörelse av kartor, etc.), måste vi för detta använda Yandex.Maps API: https://tech.yandex.ru/maps/jsapi/ . Som ett exempel på hur man använder kartor kommer den här artikeln att titta på att skapa en karta med det enkla tillägget av en anpassad etikett och ballong.

Låt oss först ansluta API-komponenterna:

Om någon stor applikation utvecklas med hjälp av kartor, är det bättre att ansluta API-komponenter av en viss version så att ingenting går sönder i produktionen när du uppdaterar API:et på Yandex-sidan:

Kartan kommer att behöva placeras i något block, till exempel i div#karta. Därefter måste kartan skapas i detta block (efter att kart- och DOM-beredskapshändelsen har utlösts):

Här anger vi:

1. blockidentifierare Karta, där vi kommer att skapa en karta;
2. Centrum— Kartans mitt som anger bredd och longitud.
3. zoom— kartskalafaktor.

Som standard skapar Yandex.Maps många onödiga element, som i de flesta fall inte behövs på webbplatser. I grund och botten räcker det att tillämpa två villkor för kontrollerna och kartans beteende:

1. av kartelementen är endast zoomreglaget närvarande;
2. kartan ska inte zoomas med musen.

För att uppfylla dessa krav kompletterar vi koden:

Här har vi inaktiverat scrollzoom och tillagt "zoomkontroll" placerad från det övre vänstra hörnet.

Nu måste vi lägga till en etikett på kartan, för artikeln laddar vi ner dess bild från http://medialoot.com/item/free-vector-map-location-pins/ och placerar den i koden enligt följande:

Här deklarerar vi en variabel mittPlatsmärke, där vi skriver markören, i den första parametern ymaps.Placemark ange etikettkoordinaterna och i den tredje parametern:

1. ange i ikonLayout att en anpassad etikettbild kommer att användas;
2. iconImageHref- sökväg till bilden;
3. iconImageSize- ange storleken på bilden;
4. iconImageOffset- vi indikerar förskjutningen från bildens övre vänstra hörn till bildens punkt, som vi pekar på objektet vi behöver. Detta är nödvändigt så att etikettens position inte kommer på avvägar när kartan skalas. Varför förskjutningen anges i negativa värden - bara Gud vet skaparen av API.

Och igenom myMap.geoObjects.add() lägg till en markör på kartan.

Och låt oss nu göra en ballong som kommer att visas när vi klickar på kartetiketten, vi tar ballongens layout och dess innehåll från http://designdeck.co.uk/a/1241

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("karta" , ( mitten: [ 55.7652 , 37.63836 ] , zoom: 17 , kontroller: ) ); myMap.behaviors .disable ("scrollZoom") ; myMap. kontroller .add ("zoomControl" , ( position: ( topp: 15 , vänster: 15 ) ) ); var html = " "; html += "" ; html +=" "; html += " Victoria Tower Gardens " ; html += "" ; html +=" City of London " ; html += "" ; html += " Storbritannien " ; 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) ; )

Vi är här:

1. i ballonginnehåll ange innehållet som kommer att visas när ballongen öppnas;
2. ballonglayout- ange att en anpassad bild kommer att användas som ballonglayout;
3. ballongContentSize och ballongBildstorlek— Storlek på innehåll respektive bilder.
4. balloonImageHref- sökväg till bilden;
5. balloonImageOffset- förskjutning i förhållande till det övre vänstra hörnet;
6. ballongShadow— inaktivera ballongens skugga (det påverkar ingenting med anpassade bilder).

En releasekandidat är en version av API:et som är tillgänglig för allmänt bruk, men som fortfarande är under godkännande. Innan releasekandidaten installeras som en stabil version, så snart den släpps, testas den för buggar som kan leda till försämring av API-funktionalitet. Genom att använda releasekandidater i dina projekt kan du hjälpa oss att i tid identifiera potentiella fel. Du kan också förtesta din app funktion med en ny version av API:et.

Releasekandidater bör användas i apputvecklings- och testmiljön. Detta hjälper dig att undvika fel i produktionsmiljön. Du kan aktivera en releasekandidat enligt följande:

I början ansluter vi kartans API på http://api-maps.yandex.ru/

Låt oss titta på alternativen mer detaljerat:

lang - ställs in av två parametrar language_region,

språk - tvåsiffrig språkkod. Specificerad i ISO 639-1-format.
region - tvåsiffrig landskod. Specificerad i ISO 3166-1-format.

På det här ögonblicket följande lokaler stöds:

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

Ytterligare alternativ kan användas:

coordorder - ordningen i vilken geografiska koordinater anges i API-funktioner som accepterar longitud-latitudpar som indata (till exempel Platsmärke).

Möjliga värden:

latlong - [latitud, longitud] - används som standard;
longlat - [longitud, latitud].

Standardvärde: latlong.

ladda - Lista över moduler som ska laddas.

Standardvärde: package.full.

läge - API-laddningsläge.

mode=release - API-kod kan laddas ner i paketerad form för att minimera trafik och körhastighet i webbläsaren;
mode=debug - nedladdningsläge som källkod.

Standardvärde: release.

Läs mer om anslutningsmöjligheter

För att visa kartan anges en behållare med en storlek som inte är noll, vilket HTML-element av blocktyp som helst kan användas som en behållare, i exemplet är det div.

Kartparametrar ställs in i koden:

myMap = new ymaps.Map('map', (
centrum: , // mitten av Nizhny Novgorod-kartan
zoom: 12 - zoomnivå
});

Kartan ska skapas efter att hela webbsidan har laddats. Detta kommer att se till att behållaren för kartan har skapats och kan nås med id. För att initiera kartan efter att sidan har laddats kan du använda funktionen ready().

Ready-funktionen kommer att anropas när API:et har laddats och DOM har genererats.

ymaps.ready(init);

funktion init()(
// Skapa en instans av kartan och bind den till behållaren med
// givet id ("karta").
myMap = new ymaps.Map('map', (
// När du initierar kartan måste du ange
// dess centrum och skalfaktor.
centrum: , // Nizhny Novgorod
zoom: 12
});

Som standard visar kartan alla tillgängliga kontroller.

Karttyp - schema.

API:et tillhandahåller fem inbyggda karttyper:

Schema (yandex#map) - som standard;
Satellit (yandex#satellit);
Hybrid (yandex#hybrid);
Människors karta (yandex#publicMap);
Hybrid av den nationella kartan (yandex#publicMapHybrid).

Exempel med bestämning av karttyp Satellit

Exempelkod:

Som jag sa tidigare, läggs standarduppsättningen av 'mediumMapDefaultSet'-kontroller till på kartan som standard.

För att lägga till de nödvändiga kontrollerna på kartan kan du ange en lista med motsvarande nycklar i kontrollparametern när du skapar kartan.

Här är exempelkoden för kartskala och typkontroller.

Exempelkod:

Det är möjligt att ställa in kartans beteende med hjälp av parametern beteenden.

Genom att ställa in dess värden kan vi aktivera eller inaktivera olika alternativ för kartans beteende:

skala kartan genom att dubbelklicka på musknappen;

dra kartan med musen eller en enda touch;

skala kartan när du väljer ett område med vänster musknapp;

skala kartan med en multi-touch touch;

skala kartan när du väljer ett område Högerklicka möss;

avståndsmätning;

zooma kartan med mushjulet.

Kodexempel med mushjulszoom inaktiverad.

Det är möjligt att ändra parametrarna för en karta efter att den har skapats.

Aktivera mushjulets zoom

myMap.behaviors.enable("scrollZoom");

Stäng av

myMap.behaviors.disable("scrollZoom");

Installerar en ny typ av karta Folk

myMap.setType('yandex#publicMap');

Skapar ett nytt kartcenter

Det var allt tills vidare.

Fortsättning följer…