Příklady map Yandex api 2.1. Proč přemýšlíme o designu?
Vydali jsme beta verzi rozhraní Yandex.Maps 2.1 API. Jeho hlavním rysem je kompletní přepracování mapového rozhraní. Změny se navíc dotkly nejen vzhled, ale také chování ovládacích prvků mapy. Protože bylo zpočátku jasné, že se nelze vyhnout zhroucení zpětné kompatibility, provedli jsme také architektonické změny, které byly nezbytné pro zlepšení výkonu API (více o nich na konci příspěvku).
Z hlediska designu pro nás bylo důležité, aby rozhraní vypadalo stejně dobře na zařízeních a obrazovkách různých velikostí. Jedním z hlavních problémů je, že nikdy předem nevíme, jak bude služba nebo web s vestavěnými mapami vypadat. Proto jsme se při vývoji redesignu museli snažit poskytnout co nejvíce možností.
Abychom vyřešili naše problémy, rozhodli jsme se nová verze implementovat návrh adaptivního rozhraní. Na další konferenci předvedli designér madhare a vývojář zloylos prezentaci o tom, proč potřebujeme adaptabilitu a jak přesně jsme ji implementovali do API. V tomto příspěvku popíšu pozadí a koncept našich řešení, pohovořím o tom, co dalšího je nového ve verzi 2.1-beta, a také o tom, co se ještě změní pro vydání 2.1.
Proč přemýšlíme o designu? Po vydání verze 2.0 jsme již psali příspěvek, ve kterém jsme hovořili o našem přístupu k vývoji API. Podstatou konceptu je, že děláme produkt nejen pro vývojáře, ale i pro ty, kteří výsledky své práce využijí. Pokud člověku přijde pohodlné a příjemné používat naše karty a bude je vyžadovat od svých oblíbených služeb, bude to opravdu úspěch. Zároveň by také mělo být snadné a příjemné pro vývojáře uspokojit přání uživatelů, což znamená, že jim musíme co nejvíce zjednodušit práci s API. S těmito myšlenkami jsme začali pracovat na verzi 2.0 a nová beta verze 2.1 se stala logickým pokračováním stejného konceptu Výzkum Pozorováním instalací našeho API a analýzou případů použití karet jsme identifikovali dva hlavní typy vývojářů:- Řeší typické problémy, nechtějí trávit spoustu času a dávají přednost hotovým rozhraním Yandex. To je přibližně 90 %.
- Řeší nestandardní problémy nebo raději řeší i standardní problémy po svém. Standardní ovládání jim nevyhovuje. Je potřeba seriózní přizpůsobení mapy. Je logické, že se jedná o zbývajících 10 %.
Po rozhodnutí o publiku jsme začali studovat případy použití. Ukázalo se, že v našem případě je kupodivu nejdůležitější velikost. Skončili jsme s možnostmi 3+1: malá, střední, velká mapa a mobilní stránky.
Kreslíme návrhy karet různých velikostí. Nejobtížnějším případem jsou malé karty. Zdá se, že kvůli malé velikosti stojí za to odstranit všechny ovládací prvky karty, ale také nechcete přijít o funkčnost. Proto jsme speciálně pro malé mapy vytvořili novou sadu ovládacích prvků:Byl také přidán nový ovládací prvek – „rozbalit mapu na celou obrazovku“. Umístěním šetří místo na webu malá mapa a koncový uživatel má stále možnost prohlížet velká mapa. Veškeré potřebné chování karty je již naprogramováno na straně API. Obecně se nápad na toto tlačítko zrodil, když jsme přemýšleli o řešení mobilní zařízení. Mapa přiměřené velikosti na desktopu se na mobilním zařízení může stát zcela zbytečnou. Celá obrazovka řeší tento problém:
Navíc se změnil design balunů pro malé velikosti map. Na malých mapách a obrazovkách mobilních zařízení je nyní standardní bublina nahrazena pruhem ve spodní části obrazovky. To vám umožní udržet mapu informativnější pro uživatele. V případě potřeby lze tuto možnost deaktivovat.
Se středními kartami je vše mnohem jednodušší. Protože je prostor se otočit:
Stejně jako u velkých map:
Abychom vývojářům co nejvíce usnadnili výběr ovládacích prvků mapy, vyrobili jsme tři hotové sady pro různé velikosti map.
map.controls.add("výchozí");
Seznam dostupných klíčů:
smallMapDefaultSet // pro malé
mediumMapDefaultSet // pro normální
largeMapDefaultSet // pro velké
Potřebné ovládací prvky si samozřejmě stále můžete sami určit.
myMap.controls .add("trafficControl") // traffic.add("searchControl") // search.add("zoomControl") // zoom control.add("typeSelector") //layers.add("geolocationControl " ) // geolocation.add("fullscreenControl") // celá obrazovka...
Implementovali jsme adaptivní chování prostřednictvím control.Manager. Můžete jej také nastavit pro tlačítka a seznamy, které sami vytvoříte:
Při práci jsme měli čas udělat malý úklid v kódu na základě jeho výsledků, zde jsou mikronálezy:
Mikrozávěr 1. Při předávání funkce handleru je mnohem výhodnější předat funkci zvlášť a kontext zvlášť. Pokud vás svrbí udělat závaz hned, zvažte, zda si to můžete dovolit.
Mikroinference 2. Snižte počet mezilehlých polí, objektů a anonymních funkcí. Ne vždy je popelář dobře vyčistí.
control.GeolocationControl(parameters) Mechanismus umístění uživatele používaný v API byl také vylepšen. Nyní je automaticky vybrán nejpřesnější výsledek z geolokace prohlížeče a geolokace podle IP adresy.
- Cluster se výrazně změní.
- Map.action.Manager bude přepsán.
- Sliby budou realizovány podle
V tomto článku chci začít sérii článků o práci s API Yandex.Maps. Dokumentace Yandex.Maps je poměrně úplná, ale míra fragmentace informací v ní je vysoká, když se poprvé dostanete do dokumentace, nebudete schopni na to přijít bez půl litru a vyřešit problém; může strávit spoustu času hledáním v dokumentaci a ve vyhledávači. Tato série článků bude o tom hovořit praktická řešení nejběžnější případy použití rozhraní Yandex.Maps API, nejnovější, v době psaní tohoto článku, verze 2.1.
Při rozvržení webu do kontaktních údajů je často nutné vložit mapu, na které bude vyznačena poloha organizace, pro kterou je web vyvíjen. V nejjednodušších případech to může být jednoduše snímek obrazovky z online map (nebo ne online):
Chcete-li vložit interaktivní mapa lze použít konstruktor map
https://tech.yandex.ru/maps/tools/constructor/ :
Pokud potřebujeme pokročilejší použití map (vlastní štítky, programový pohyb map atd.), pak k tomu musíme použít Yandex.Maps API: https://tech.yandex.ru/maps/jsapi/ . Jako příklad použití map se tento článek podívá na vytvoření mapy pouhým přidáním vlastního štítku a bubliny.
Nejprve propojme komponenty API:
Pokud vyvíjíte velkou aplikaci pomocí map, je lepší připojit komponenty API určité verze, aby se při aktualizaci API na straně Yandexu ve výrobě nic nezlomilo:
Mapu bude potřeba umístit do nějakého bloku, například do div#mapa. Dále musí být mapa vytvořena v tomto bloku (po spuštění události připravenosti mapy a DOM):
ymaps.ready(init); |
function init() ( var myMap; myMap = new ymaps.Map ("mapa" , ( střed: [ 55,76 , 37,64 ], zoom: 7) ) ; )
Ve výchozím nastavení Yandex.Maps vytváří spoustu zbytečných prvků, které ve většině případů nejsou na webových stránkách potřeba. V podstatě stačí na ovládání a na chování karty aplikovat 2 podmínky:
Abychom splnili tyto požadavky, doplňujeme kód:
ymaps.ready(init); |
function init() ( var myMap; myMap = new ymaps.Map ("map" , ( center: [ 55,76, 37,64 ], zoom: 13 , controls: ) ) ; myMap.behaviors .disable ( "scrollZoom" ) ; myMap. controls.add("zoomControl" , ( pozice: ( nahoře: 15 , vlevo: 15 ) ) ); Zde jsme deaktivovali"scrollZoom" a přidal"zoomControl"
s polohováním z levého horního rohu.
Nyní musíme přidat špendlík do mapy pro článek, stáhnout jeho obrázek z http://medialoot.com/item/free-vector-map-location-pins/ a umístit jej do kódu takto: |
ymaps.ready(init); function init() ( var myMap; myMap = new ymaps.Map ("map", ( center: [ 55.7652, 37.63836 ], zoom: 17, controls: ) ) ; myMap.behaviors .disable ( "scrollZoom" ) ; myMap. ovládací prvky .add ( "zoomControl" , ( pozice: ( nahoře: 15, vlevo: 15) ) ) ; var myPlacemark = new ymaps.Placemark ( [ 55.7649 , 37.63836 ] , ( ) , ( iconLayout: "default#image" ref. : , iconImageSize: [ 40 , 51 ], iconImageOffset: [ - 20 , - 47 ] ) ) myMap.geoObjects .add (myPlacemark) ; Zde deklarujeme proměnnou myPlacemark, ve kterém zapíšeme značku do prvního parametru
iconImageOffset — naznačíme posun od levého horního rohu obrázku k bodu na obrázku, který ukážeme na potřebnou hlasitost. To je nutné, aby se při změně měřítka mapy neztratila poloha značky. Proč je offset indikován v záporných hodnotách - pouze Bůh zná tvůrce API. A skrz
myMap.geoObjects.add()
ymaps.ready(init); function init() ( var myMap; myMap = new ymaps.Map ("map", ( center: [ 55.7652, 37.63836 ], zoom: 17, controls: ) ) ; myMap.behaviors .disable ( "scrollZoom" ) ; myMap. ovládací prvky .add ( "zoomControl" , ( pozice: (nahoře: 15, vlevo: 15) ) ; var html = "" html += " " ; html += "" ; html += " function init() ( var myMap; myMap = new ymaps.Map ("map", ( center: [ 55.7652, 37.63836 ], zoom: 17, controls: ) ) ; myMap.behaviors .disable ( "scrollZoom" ) ; myMap. ovládací prvky .add ( "zoomControl" , ( pozice: (nahoře: 15, vlevo: 15) ) ; var html = "" html += "Victoria Tower Gardens function init() ( var myMap; myMap = new ymaps.Map ("map", ( center: [ 55.7652, 37.63836 ], zoom: 17, controls: ) ) ; myMap.behaviors .disable ( "scrollZoom" ) ; myMap. ovládací prvky .add ( "zoomControl" , ( pozice: (nahoře: 15, vlevo: 15) ) ; var html = "" html += "City of London Spojené království020 7641 5264 " ; html +=" |
" ; 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 , H: ref. obrázek //site/files/APIYaMaps1/min_popup.png" , balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false ) ); myMap.geoObjects (myPlace) .add
— zakázání stínu balónu (u vlastních obrázků nic neovlivní).
29. dubna 2014 bylo oznámeno, že nová verze rozhraní Yandex.Maps API 2.1 opouští stav beta a nyní na ni můžete bezpečně přejít.
V několika následujících příspěvcích vám plánuji představit tuto verzi API. Základní charakteristické rysy
JavaScript API Yandex.Maps verze 2.1:
— nový adaptivní design mapových rozhraní;
— multirouter — schopnost postavit všechny možné trasy místo jedné;
— modulární systém API. Seznam všech modulů API je uveden v referenční příručce.
- nový způsob zobrazování objektů na mapě, který umožňuje vytvářet více značek než ve verzi 2.0.
Můžete si přečíst podrobnou dokumentaci k nové verzi rozhraní Yandex.Maps API 2.1.
Podívejme se na nejjednodušší příklad vytvoření mapy pomocí rozhraní Yandex.Maps 2.1 API.
Zde je jeho kód: vytvoření mapy pomocí Yandex.Maps API 2.1.
var myMap; // Počkejte, až se načte API a DOM bude připraven. ymaps.ready(init); function init () ( // Vytvoření instance mapy a její navázání na kontejner s // daným id ("mapa"). myMap = new ymaps.Map("map", ( // Při inicializaci mapy musíte uveďte // jeho střed a faktor přiblížení: , // Nižnij Novgorod přiblížení: 12 ));
Hned na začátku připojujeme mapové API na http://api-maps.yandex.ru/
Pojďme se blíže podívat na parametry:
lang – specifikovaný dvěma parametry language_region,
jazyk - dvoumístný kód jazyka. Specifikováno ve formátu ISO 639-1.
region - dvoumístný kód země. Určeno ve formátu ISO 3166-1.
V současné době jsou podporovány následující národní prostředí:
lang=ru_RU;
lang=cs_US;
lang=ru_UA;
lang=uk_UA;
lang=tr_TR.
Lze použít další parametry:
coordorder — pořadí, ve kterém jsou zeměpisné souřadnice zadány ve funkcích rozhraní API, které přijímají jako vstup dvojice zeměpisná délka-šířka (například značka místa).
Možné hodnoty:
latlong - [zeměpisná šířka, délka] - používá se ve výchozím nastavení;
longlat - [délka, šířka].
Výchozí hodnota: latlong.
load — Seznam načtených modulů.
Výchozí hodnota: package.full.
režim — režim načítání API.
mode=release - kód API lze stáhnout v zabalené formě, aby se minimalizoval provoz a rychlost provádění v prohlížeči;
mode=debug - režim stahování ve formě zdrojového kódu.
Výchozí hodnota: uvolnit.
Můžete si přečíst více o parametrech připojení
Pro zobrazení mapy je určen kontejner nenulové velikosti jako kontejner lze použít libovolný HTML element typu block, v příkladu je to div.
Parametry mapy se nastavují v kódu:
myMap = new ymaps.Map('map', (
střed: , // střed mapy Nižnij Novgorod
});
zoom: 12 - úroveň zoomu
Po načtení celé webové stránky byste měli vytvořit mapu. Tím zajistíte, že kontejner pro kartu byl vytvořen a bude k němu přístup pomocí ID. Pro inicializaci mapy po načtení stránky můžete použít funkci ready().
Funkce ready bude volána po načtení API a vytvoření DOM
ymaps.ready(init);
funkce init() (
// Vytvořte instanci mapy a svažte ji s kontejnerem s
// dané id ("mapa").
myMap = new ymaps.Map('map', (
// Při inicializaci mapy musíte zadat
// jeho střed a faktor měřítka.
centrum: , // Nižnij Novgorod
});
zoom: 12
Ve výchozím nastavení mapa zobrazuje všechny dostupné ovládací prvky.
API poskytuje pět integrovaných typů map:
Schéma (yandex#map) - výchozí;
Satelit (yandex#satellite);
hybridní (yandex#hybrid);
Mapa lidí (yandex#publicMap);
Hybrid veřejné mapy (yandex#publicMapHybrid).
Příklad s určením typu satelitní karty
Příklad kódu:
Vyberme typ mapy – Satelitní. Příklad vytvoření mapy pomocí Yandex.Maps API 2.1.
tělo, html ( odsazení: 0; okraj: 0; šířka: 100 %; výška: 100 %; ) var myMap; // Počkejte, až se načte API a DOM bude připraven. ymaps.ready(init); function init () ( // Vytvoření instance mapy a její navázání na kontejner s // daným id ("mapa"). myMap = new ymaps.Map("map", ( // Při inicializaci mapy musíte zadejte // jeho střed a faktor přiblížení: , // Nižnij Novgorod přiblížení: 12, zadejte: "yandex#satellite" ));
Jak jsem již řekl, výchozí sada ovládacích prvků 'mediumMapDefaultSet' je ve výchozím nastavení přidána do mapy.
Chcete-li do mapy přidat potřebné ovládací prvky, můžete při jejím vytváření zadat seznam odpovídajících klíčů v parametru ovládacích prvků.
Příklad kódu:
Zde je příklad kódu pro ovládací prvky pro měřítko a typ mapy. |
tělo, html ( odsazení: 0; okraj: 0; šířka: 100 %; výška: 100 %; )
Ovládací prvky mapy. Příklad vytvoření mapy pomocí Yandex.Maps API 2.1.
tělo, html ( odsazení: 0; okraj: 0; šířka: 100 %; výška: 100 %; ) var myMap; // Počkejte, až se načte API a DOM bude připraven. ymaps.ready(init); function init () ( // Vytvoření instance mapy a její navázání na kontejner s // daným id ("mapa"). myMap = new ymaps.Map("map", ( // Při inicializaci mapy musíte zadejte // jeho střed a faktor přiblížení: , // zoom Nižnij Novgorod: 12, ovládací prvky: ["zoomControl", "typeSelector"] ));
Chování mapy je možné nastavit pomocí parametru behaviors.
Nastavením jeho hodnot můžeme povolit nebo zakázat různé parametry chování mapy:
přiblížení mapy dvojitým kliknutím tlačítka myši;
přetažení mapy pomocí myši nebo jediného dotyku;
přiblížení mapy při výběru oblasti levým tlačítkem myši; přiblížení mapy pomocí vícedotykového dotyku; změna měřítka mapy při výběru oblasti
klikněte pravým tlačítkem
myši;
měření vzdálenosti;
Zde je příklad kódu pro ovládací prvky pro měřítko a typ mapy. |
Správa chování karty. Příklad vytvoření mapy pomocí Yandex.Maps API 2.1.
tělo, html ( odsazení: 0; okraj: 0; šířka: 100 %; výška: 100 %; ) var myMap; // Počkejte, až se načte API a DOM bude připraven. ymaps.ready(init); function init () ( // Vytvoření instance mapy a její navázání na kontejner s // daným id ("mapa"). myMap = new ymaps.Map("map", ( // Při inicializaci mapy musíte zadejte // jeho střed a střed zvětšení: , // Nižnij Novgorod zoom: 12 ));
Po vytvoření mapy je možné změnit její parametry.
Povolte přiblížení pomocí kolečka myši
myMap.behaviors.enable("scrollZoom");
Vypnout
myMap.behaviors.disable("scrollZoom"); Instalovat nový typ
Národní karty
myMap.setType('yandex#publicMap');
Nastavení nového centra mapy
To je zatím vše.
také předběžně otestujte fungování vaší aplikace pomocí nové verze rozhraní API. Kandidáti na uvolnění by se měli používat v aplikaci
vývojové a testovací prostředí. To vám pomůže vyhnout se chybám v produkčním prostředí. Kandidáta na vydání můžete povolit následovně:
Pokud se nějakou dobu po zveřejnění kandidáta na vydání nenajdou žádné chyby, které by vedly k degradaci funkčnosti, nainstaluje se kandidát na vydání jako stabilní verze API a lze k němu přistupovat přes odkaz api-maps.yandex.ru/2.1.Povolení aktuální verze Při používání vaší aplikace doporučujeme zadat hlavní verzi (tj třetí
číslo verze). To zaručuje, že aktuální verze, tedy nejnovější stabilní verze odpovídající hlavní verze, bude automaticky povolena. Pokud například zadáte verzi 2.1, bude povolena nejnovější dostupná stabilní verze 2.1.x (například 2.1.47):
Přestože je zaručena plná kompatibilita mezi menšími verzemi, ve vzácných případech můžete zjistit, že vaše klientská aplikace nebude fungovat tak, jak má, když povolíte nejnovější verzi rozhraní API. Chcete-li se těmto situacím vyhnout, ve zvláště kritických případech budete možná muset povolit konkrétní verzi rozhraní API. Za tímto účelem zadejte jeho celé číslo:
Poznámka. Pokud používáte nastavenou verzi, zkuste ji pravidelně přecházet na novější verzi (například jednou za pár měsíců). Jde o to, že v průběhu času můžeme deaktivovat vedlejší verzi, kterou používáte ve svém projektu, a poté bude automaticky povolena aktuální verze API. Aktualizace verze však může způsobit, že vaše aplikace přestane správně fungovat. Z tohoto důvodu doporučujeme sledovat aktualizace API a co nejdříve přejít na novější verze.
Souhrnná tabulkaNíže uvedená tabulka poskytuje doporučení pro povolení různých verzí rozhraní API v závislosti na typu a složitosti vašeho projektu.
Střední a velké projekty se základní mapou | Nejnovější verze pro testování funkčnosti. |
|
Střední a velké projekty s komplexními mapovými prvky | Chcete-li otestovat funkčnost, nastavte verzi. |
|
Projekty využívající komerční verzi API | Nastavit verzi (viz poznámka níže) |
Poznámka. Pokud používáte nastavenou verzi, zkuste ji pravidelně přecházet na novější verzi. Jde o to, že v průběhu času můžeme deaktivovat vedlejší verzi, kterou používáte ve své aplikaci, a poté se automaticky povolí aktuální verze API. Aktualizace verze však může způsobit, že vaše aplikace přestane správně fungovat. Z tohoto důvodu doporučujeme sledovat aktualizace API a co nejdříve přejít na novější verze.