Prechod rozhrania API máp Yandex 2.1

V tomto článku chcem začať sériu článkov o práci s rozhraním API Yandex.Maps. Dokumentácia Yandex.Maps je celkom úplná, ale stupeň fragmentácie informácií v nej je vysoký; keď prvýkrát zadáte dokumentáciu bez pol litra, nemôžete na to prísť a na vyriešenie problému môžete minúť veľa času hľadaním v dokumentácii a vo vyhľadávači. Táto séria článkov bude hovoriť o praktických riešeniach najbežnejších prípadov používania rozhrania API Yandex.Maps najnovšej verzie 2.1 v čase písania tohto článku.

Pri rozvrhnutí stránky do kontaktných informácií je často potrebné vložiť mapu, na ktorej bude vyznačená lokalita organizácie, pre ktorú je stránka vyvíjaná. V najjednoduchších prípadoch to môže byť len snímka obrazovky z online máp (alebo nie online):

Pre vložku interaktívna mapa možno použiť nástroj na tvorbu máp
https://tech.yandex.ru/maps/tools/constructor/ :

Ak potrebujeme pokročilejšie používanie máp (naše vlastné štítky, programový pohyb máp atď.), Potom na to musíme použiť rozhranie Yandex.Maps API: https://tech.yandex.ru/maps/jsapi/ . Ako príklad použitia máp sa tento článok bude zaoberať vytvorením mapy jednoduchým pridaním vlastného štítku a balónika.

Najprv prepojme komponenty API:

Ak sa pomocou máp vyvíja nejaká veľká aplikácia, je lepšie pripojiť komponenty API určitej verzie, aby sa pri aktualizácii API na strane Yandex vo výrobe nič neprerušilo:

Mapu bude potrebné umiestniť do nejakého bloku, napr div#mapa. Ďalej musí byť mapa vytvorená v tomto bloku (po spustení udalosti pripravenosti mapy a DOM):

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("mapa" , ( stred: [ 55,76 , 37,64 ] , priblíženie: 7 ) ) ); )

Tu uvádzame:

identifikátor bloku mapa, kde vytvoríme mapu;
stred— stred mapy označujúci šírku a zemepisnú dĺžku;
priblížiť— faktor mierky mapy.

V predvolenom nastavení Yandex.Maps vytvára veľa nepotrebných prvkov, ktoré vo väčšine prípadov na webových stránkach nie sú potrebné. V podstate stačí na ovládanie a na správanie mapy použiť 2 podmienky:

z prvkov mapy je prítomný iba posúvač priblíženia;
mapa by sa nemala približovať posúvaním myši.

Aby sme splnili tieto požiadavky, dopĺňame kód:

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("mapa" , ( center: [ 55,76 , 37,64 ] , zoom: 13 , controls: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. ovládacie prvky .add ("zoomControl" , ( pozícia: ( hore: 15 , vľavo: 15 ) ) ) ; )

Tu máme zakázané scrollzoom a dodal "ovládanie zoomu" umiestnené z ľavého horného rohu.

Teraz musíme pridať štítok na mapu, pre článok stiahneme jeho obrázok z http://medialoot.com/item/free-vector-map-location-pins/ a umiestnime ho do kódu takto:

Tu deklarujeme premennú myPlacemark, do ktorého zapíšeme značku, v prvom parametri ymaps.Značka miesta zadajte súradnice štítku a v treťom parametri:

uviesť v iconLayoutže sa použije vlastný obrázok štítku;
iconImageHref- cesta k obrázku;
iconImageSize- určiť veľkosť obrázka;
iconImageOffset- naznačíme posun z ľavého horného rohu obrázku do bodu obrázku, ktorým ukážeme na objekt, ktorý potrebujeme. Je to potrebné, aby sa pri zmene mierky mapy nezchýlila poloha štítku. Prečo je posun uvedený v záporných hodnotách - iba Boh pozná tvorcu API.

A cez myMap.geoObjects.add() pridať značku na mapu.

A teraz si vyrobíme balón, ktorý sa nám zobrazí po kliknutí na štítok mapy, rozloženie balóna a jeho obsah prevezmeme z http://designdeck.co.uk/a/1241

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("mapa" , ( center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ); ovládacie prvky .add ("zoomControl" , (pozícia: (hore: 15, vľavo: 15) ) ) ; var 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) ; )

Sme tu:

v balónObsah určiť obsah, ktorý sa zobrazí pri otvorení balónika;
rozloženie balóna- určiť, že ako rozloženie balóna sa použije vlastný obrázok;
balloonContentSize a balloonImageSize— veľkosti obsahu a obrázkov;
balloonImageHref- cesta k obrázku;
balloonImageOffset- odsadenie vzhľadom na ľavý horný roh;
balón Tieň— vypnutie tieňa balóna (neovplyvní to nič s vlastnými obrázkami).

Kandidát na vydanie je verzia rozhrania API, ktorá je k dispozícii na verejné použitie, ale stále sa schvaľuje. Pred inštaláciou kandidáta na vydanie ako stabilnej verzie sa hneď po vydaní testuje na chyby, ktoré môžu viesť k degradácii funkčnosti API. Použitím kandidátov na vydanie vo svojich projektoch nám môžete pomôcť včas identifikovať potenciálne chyby. Fungovanie aplikácie môžete tiež vopred otestovať pomocou novej verzie rozhrania API.

Kandidáti na vydanie by sa mali používať v prostredí vývoja a testovania aplikácií. To vám pomôže vyhnúť sa chybám v produkčnom prostredí. Kandidáta na vydanie môžete povoliť takto:

Na úplnom začiatku pripájame API pre mapy na http://api-maps.yandex.ru/

Pozrime sa na možnosti podrobnejšie:

lang - nastavený dvoma parametrami language_region,

jazyk - dvojmiestny kód jazyka. Špecifikované vo formáte ISO 639-1.
región – dvojmiestny kód krajiny. Špecifikované vo formáte ISO 3166-1.

Na tento moment sú podporované nasledujúce miestne nastavenia:

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

Môžu sa použiť ďalšie možnosti:

coordorder – poradie, v ktorom sú geografické súradnice špecifikované vo funkciách API, ktoré akceptujú páry zemepisnej dĺžky a šírky ako vstup (napríklad značka miesta).

Možné hodnoty:

latlong - [zemepisná šírka, dĺžka] - používa sa predvolene;
longlat - [zemepisná dĺžka, šírka].

Predvolená hodnota: latlong.

load – zoznam modulov na načítanie.

Predvolená hodnota: package.full.

režim - režim načítania API.

mode=release – kód API je možné stiahnuť v zabalenej forme, aby sa minimalizovala návštevnosť a rýchlosť vykonávania v prehliadači;
mode=debug - režim sťahovania ako zdrojového kódu.

Predvolená hodnota: uvoľnenie.

Prečítajte si viac o možnostiach pripojenia

Pre zobrazenie mapy je určený kontajner nenulovej veľkosti, ako kontajner môže byť použitý ľubovoľný HTML element blokového typu, v príklade je to div.

Parametre mapy sa nastavujú v kóde:

myMap = new ymaps.Map('map', (
stred: , // stred mapy Nižný Novgorod
zoom: 12 - úroveň priblíženia
});

Mapa by mala byť vytvorená po načítaní celej webovej stránky. Tým sa zabezpečí, že kontajner pre mapu bol vytvorený a je možné k nemu pristupovať pomocou ID. Na inicializáciu mapy po načítaní stránky môžete použiť funkciu ready().

Funkcia ready sa zavolá po načítaní API a vygenerovaní DOM.

ymaps.ready(init);

funkcia init()(
// Vytvorte inštanciu mapy a naviažte ju na kontajner s
// dané id ("mapa").
myMap = new ymaps.Map('map', (
// Pri inicializácii mapy musíte zadať
// jeho stred a mierkový faktor.
centrum: , // Nižný Novgorod
priblíženie: 12
});

V predvolenom nastavení sa na mape zobrazujú všetky dostupné ovládacie prvky.

Typ mapy - schéma.

Rozhranie API poskytuje päť vstavaných typov máp:

Schéma (yandex#map) - predvolene;
satelit (yandex#satellite);
hybridný (yandex#hybrid);
Mapa ľudí (yandex#publicMap);
Hybrid národnej mapy (yandex#publicMapHybrid).

Príklad s určením typu mapy Satelit

Príklad kódu:

Za typom mapy - Satelitná. Príklad vytvorenia mapy pomocou rozhrania Yandex.Maps API 2.1.