Yandex карти api 2.1 преход

В тази статия искам да започна поредица от статии за работа с API на Yandex.Maps. Документацията на Yandex.Maps е доста пълна, но степента на фрагментация на информацията в нея е висока; когато за първи път влезете в документацията без половин литър, не можете да я разберете и за да разрешите проблем, можете да прекарате много време за търсене в документацията и в търсачката. Тази поредица от статии ще говори за практически решения на най-често срещаните случаи на използване на API на Yandex.Maps от най-новата, към момента на писане, версия 2.1.

Когато оформяте сайт в информацията за контакт, често е необходимо да поставите карта, на която ще бъде отбелязано местоположението на организацията, за която се разработва сайтът. В най-простите случаи това може да бъде просто екранна снимка от онлайн карти (или не онлайн):

За вмъкване интерактивна картаможе да се използва конструктор на карти
https://tech.yandex.ru/maps/tools/constructor/ :

Ако имаме нужда от по-разширено използване на карти (наши собствени етикети, програмно движение на карти и т.н.), тогава за това трябва да използваме API на Yandex.Maps: https://tech.yandex.ru/maps/jsapi/ . Като пример за това как да използвате карти, тази статия ще разгледа създаването на карта с просто добавяне на потребителски етикет и балон.

Първо, нека свържем компонентите на API:

Ако някакво голямо приложение се разработва с помощта на карти, тогава е по-добре да свържете API компоненти на определена версия, така че при актуализиране на API от страната на Yandex нищо да не се счупи в производството:

Картата ще трябва да бъде поставена в някакъв блок, например в div#карта. След това картата трябва да бъде създадена в този блок (след задействане на събитието за готовност на картата и DOM):

ymaps.ready(init) ; функция init() ( var myMap; myMap = new ymaps.Map ("карта", (център: [55.76, 37.64], увеличение: 7)) ;)

Тук посочваме:

  1. идентификатор на блок карта, където ще създадем карта;
  2. център— центъра на картата, показващ ширината и дължината;
  3. увеличение— мащабен фактор на картата.

По подразбиране Yandex.Maps създава много ненужни елементи, които в повечето случаи не са необходими на уебсайтовете. По принцип е достатъчно да приложите 2 условия към контролите и към поведението на картата:

  1. от елементите на картата присъства само плъзгачът за мащабиране;
  2. картата не трябва да се увеличава с превъртане на мишката.

За да изпълним тези изисквания, допълваме кода:

ymaps.ready(init) ; функция init() ( var myMap; myMap = new ymaps.Map ("карта" , ( център: [ 55.76 , 37.64 ] , мащабиране: 13, контроли: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. контроли .add ("zoomControl" , ( позиция: ( горе: 15 , ляво: 15 ) ) ) ;)

Тук сме деактивирали scrollzoomи добави "контрол на увеличението"позициониран от горния ляв ъгъл.

Сега трябва да добавим етикет към картата, за статията ще изтеглим нейното изображение от http://medialoot.com/item/free-vector-map-location-pins/ и ще го поставим в кода, както следва:

ymaps.ready(init) ; функция init() ( var myMap; myMap = new ymaps.Map ("карта" , ( център: [ 55.7652 , 37.63836 ] , увеличение: 17, контроли: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. контроли .add ("zoomControl", (позиция: (горе: 15, ляво: 15))); var myPlacemark = new ymaps.Placemark ([ 55.7649, 37.63836], () , (iconLayout: "default#image" , iconImageHref : , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] ) ; myMap.geoObjects .add (myPlacemark) ; )

Тук декларираме променлива myPlacemark, в който записваме маркера, в първия параметър ymaps.Маркерпосочете координатите на етикета и в третия параметър:

  1. посочете в iconLayoutче ще се използва персонализирано изображение на етикета;
  2. iconImageHref- път към изображението;
  3. iconImageSize- посочете размера на изображението;
  4. iconImageOffset- посочваме изместването от горния ляв ъгъл на картината до точката на изображението, която насочваме към обекта, от който се нуждаем. Това е необходимо, така че когато картата се мащабира, позицията на етикета да не се обърка. Защо отместването е посочено в отрицателни стойности - само Бог знае създателя на API.

И чрез myMap.geoObjects.add()добавете маркер към картата.

А сега нека направим балон, който ще се показва, когато щракнем върху етикета на картата, ще вземем оформлението на балона и съдържанието му от http://designdeck.co.uk/a/1241

ymaps.ready(init) ; функция init() ( var myMap; myMap = new ymaps.Map ("карта" , ( център: [ 55.7652 , 37.63836 ] , увеличение: 17, контроли: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. контроли .add ("zoomControl", ( позиция: (горе: 15, ляво: 15))) ; var html = "
"; html += "" ; html +="
"; html += "

Градините на Виктория Тауър

" ; html += "" ; html +="

Лондонско сити

" ; html += "" ; html += "

Великобритания

"; 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) ; )

Ние сме тук:

  1. в balloonContentпосочете съдържанието, което ще се показва при отваряне на балона;
  2. balloonLayout- укажете, че персонализирано изображение ще се използва като оформление на балон;
  3. balloonContentSizeи balloonImageSize— размери съответно на съдържание и изображения;
  4. балон ImageHref- път към изображението;
  5. balloonImageOffset- изместване спрямо горния ляв ъгъл;
  6. balloonShadow— деактивиране на сянката на балона (това не засяга нищо с персонализирани изображения).

Кандидатът за издание е версия на API, която е достъпна за обществено ползване, но все още е в процес на одобрение. Преди да инсталирате кандидата за издание като стабилна версия, веднага щом бъде пуснат, той се тества за грешки, които могат да доведат до влошаване на функционалността на API. Като използвате кандидати за издаване във вашите проекти, можете да ни помогнете да идентифицираме навреме потенциални грешки. Можете също така да тествате предварително работата на вашето приложение с нова версия на API.

Кандидатите за издаване трябва да се използват в средата за разработка и тестване на приложения. Това ще ви помогне да избегнете грешки в производствената среда. Можете да активирате кандидат за освобождаване, както следва:



В самото начало свързваме API на картите на http://api-maps.yandex.ru/

Нека разгледаме опциите по-подробно:

lang - зададен от два параметъра language_region,

език - двуцифрен код на езика. Специфициран във формат ISO 639-1.
регион - двуцифрен код на държавата. Специфициран във формат ISO 3166-1.

На този моментподдържат се следните локали:

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

Могат да се използват допълнителни опции:

coordorder - редът, в който географските координати са посочени във функциите на API, които приемат двойки географска дължина-ширина като вход (например Placemark).

Възможни стойности:

latlong - [географска ширина, дължина] - използва се по подразбиране;
longlat - [дължина, ширина].

Стойност по подразбиране: latlong.

load - Списък с модули за зареждане.

Стойност по подразбиране: package.full.

режим - режим на зареждане на API.

mode=release - API кодът може да бъде изтеглен в пакетиран вид, за да се минимизира трафикът и скоростта на изпълнение в браузъра;
mode=debug - режим на изтегляне като изходен код.

Стойност по подразбиране: освобождаване.

Прочетете повече за опциите за свързване

За да се покаже картата, се посочва контейнер с ненулев размер, всеки HTML елемент от блоков тип може да се използва като контейнер, в примера това е div.

Параметрите на картата са зададени в кода:

myMap = new ymaps.Map('map', (
център: , // център на картата на Нижни Новгород
увеличение: 12 - ниво на увеличение
});

Картата трябва да бъде създадена, след като цялата уеб страница се зареди. Това ще гарантира, че контейнерът за картата е създаден и може да бъде достъпен чрез id. За да инициализирате картата, след като страницата е заредена, можете да използвате функцията ready().

Готовата функция ще бъде извикана, когато API бъде зареден и DOM е генериран.

ymaps.ready(init);

функция init()(
// Създайте екземпляр на картата и го свържете към контейнера с
// даден идентификатор ("карта").
myMap = new ymaps.Map('map', (
// Когато инициализирате картата, трябва да посочите
// неговия център и мащабен фактор.
център: , // Нижни Новгород
увеличение: 12
});

По подразбиране картата показва всички налични контроли.

Тип карта - схема.

API предоставя пет вградени типа карти:

Схема (yandex#map) - по подразбиране;
Сателит (yandex#satellite);
Хибрид (yandex#hybrid);
Карта на хората (yandex#publicMap);
Хибрид на националната карта (yandex#publicMapHybrid).

Пример с определяне на вида на картата Сателит

Примерен код:

Зад тип карта - Сателит. Пример за създаване на карта с помощта на Yandex.Maps API 2.1.



Както казах преди, стандартният набор от контроли „mediumMapDefaultSet“ се добавя към картата по подразбиране.

За да добавите необходимите контроли към картата, можете да посочите списък със съответните ключове в параметъра за контроли, когато създавате картата.

Ето примерния код за контроли за мащаб и тип на картата.

Примерен код:

Контроли на картата. Пример за създаване на карта с помощта на Yandex.Maps API 2.1.



Възможно е да зададете поведението на картата с помощта на параметъра за поведение.

Като зададем стойностите му, можем да активираме или деактивираме различни опции за поведението на картата:

мащабиране на картата чрез двойно щракване на бутона на мишката;

плъзгане на картата с мишката или с едно докосване;

мащабиране на картата при избор на област с левия бутон на мишката;

мащабиране на картата с мултитъч докосване;

мащабиране на картата при избор на област Кликнете с десния бутонмишки;

измерване на разстояние;

мащабиране на картата с колелцето на мишката.

Пример за код с деактивирано мащабиране на колелото на мишката.

Контрол на поведението на картата. Пример за създаване на карта с помощта на Yandex.Maps API 2.1.



Възможно е да промените параметрите на карта, след като е създадена.

Включете мащабирането на колелото на мишката

myMap.behaviors.enable("scrollZoom");

Изключи

myMap.behaviors.disable("scrollZoom");

Инсталиране на нов тип карта Folk

myMap.setType('yandex#publicMap');

Създаване на нов център на картата

Това е всичко за сега.

Следва продължение…

Подобни публикации