Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"
Александр Тармолов "API Яндекс.Карт"
-
Upload
yandex -
Category
Technology
-
view
1.050 -
download
14
description
Transcript of Александр Тармолов "API Яндекс.Карт"
![Page 2: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/2.jpg)
http://maps.yandex.ru
![Page 3: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/3.jpg)
ул. Коперника
![Page 4: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/4.jpg)
Можно сделать бесконечное количество сервисов, например:
• схема проезда (http://gazmanov.ru/contacts/)
• карта нескольких офисов (http://company.yandex.ru/)
• «где выпить?», ближайший бар (http://tyndr.ru/places/)
• портал города/области (http://www.66.ru/)
• база недвижимости (http://www.cian.ru/)
• события на карте (http://news.yandex.ru)
+ ваш сервис
![Page 5: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/5.jpg)
API Яндекс.Карт — это набор инструментов, позволяющий встраивать карты Яндекса на ваш сайт.
![Page 6: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/6.jpg)
Инструменты API:• JavaScript API
• Static API
• Геокодер
• YMapsML
6
![Page 7: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/7.jpg)
Для работы c API требуется ключ• ключ привязан к имени домена и логину на
Яндексе
• для localhost и 127.0.0.1 подойдет любой ключ
• работает для поддоменовключ для domen.ru подойдет к www.domen.ru, blog.domen.ru
7
![Page 8: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/8.jpg)
http://api.yandex.ru/maps/form.xml
Введите адрес домена
Согласитесь с пользовательским соглашением
Получение ключа:
![Page 9: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/9.jpg)
JavaScript APIбиблиотека JavaScript объектов
текущая версия 1.0.4
9
![Page 10: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/10.jpg)
Подключение• обычная загрузка
10
JavaScript API
<head> <script src=“http://api-maps.yandex.ru/{версия}/key={Api-
ключ}”/></head>
• отложенная загрузка
<head><script src=“http://api-maps.yandex.ru/{версия}/key={Api-
ключ}&loadByRequire=1” /></head>…YMaps.load(callback);
![Page 11: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/11.jpg)
Создание карты1. определяем контейнер карты
11
JavaScript API
http://api.yandex.ru/maps/tools/getlonglat/
2. создаем карту
3. инициализируем (центр, масштаб, тип карты):
<div id=“mapID” style=“width:200px; height:200px”>
var map = new YMaps.Map(document.getElementById(“mapID”));
map.setCenter(new YMaps.GeoPoint(30.45,50.42), // центр10, // масштабYMaps.MapType.MAP // тип карты
);
![Page 12: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/12.jpg)
Результат:
12
JavaScript API
![Page 13: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/13.jpg)
Встроенные элементы управления картой:• Перемещение (Dragging)
• Масштабирование двойным щелчком мыши (DblClickZoom)
• Масштабирование колесиком мыши (ScrollZoom)
• Лупа (Magnifier)
• Горячие клавиши (HotKeys)
• Линейка (Ruler)
13
JavaScript API
![Page 14: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/14.jpg)
14
JavaScript API
Переключатель типов картПанель инструментов
Элементмасштабирования
Обзорная карта Масштабная линейка
Ваш элементуправления
Элементы управления (Controls)
![Page 15: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/15.jpg)
15
JavaScript API
Объекты на карте (Overlay):
Создано с помощью инструментов Яндекс.Карт
+ ваши объекты (IOverlay)
• Метки (Placemark)
• Ломанные (Polyline)
• Балун
![Page 16: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/16.jpg)
Инструменты для работы с объектами:
16
JavaScript API
• Группы (OverlayGroup, GeoObjectCollection)
• Управление видимостью объектов (ObjectManager)
![Page 17: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/17.jpg)
Настройка внешнего вида объектов с помощью стилей
17
JavaScript API
• значок метки
• стиль рисования линии
• содержимое балуна, хинта, значка метки
или любой свой
– толщина– цвет– прозрачность
![Page 18: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/18.jpg)
Возможности стилей:• механизм наследования
значения которых нет в дочернем стиле, ищутся в родительском
• возможность доступа по ключу
• возможность задать стиль на группу объектов
18
JavaScript API
YMaps.Styles.add(“my#style”, new YMaps.Style());
// … Какие-либо действия …
var style = YMaps.Styles.get(“my#template”);
![Page 19: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/19.jpg)
Пример
19
JavaScript API
Создано с помощью инструментов Яндекс.Карт
![Page 20: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/20.jpg)
Шаблоны• html разметка со вставками данных
• возможность доступа по ключу+ переопределив метод build можно реализовать свою шаблонизацию
20
JavaScript API
var htmlText = “<h2><img src=\"$[style.iconStyle.href] \"/>\$[name]</h2><p>$[description|без комментариев]</p>”
![Page 21: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/21.jpg)
Пример
21
JavaScript API
![Page 22: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/22.jpg)
Static APIвозвращает изображение с картой в ответ на HTTP-запрос, передаваемый посредством URL с параметрами
22
![Page 23: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/23.jpg)
Особенности– меньший объем загружаемых данных
– отсутствие JavaScript
– максимальная простота
Идеально для– версий для печати
– простых схем проезда
– картинок в блог
– для мобильных устройств
23
Static API
![Page 24: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/24.jpg)
Параметры• размер карты (size)• область карты
– центр (ll, spn)– масштаб (z)– тип карты (l)
• объекты на карте– метки (pm) : цвет, размер– ломанные (pl) : цвет, ширина
24
Static API
![Page 25: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/25.jpg)
Пример
http://static-maps.yandex.ru/1.x/?key=API-ключ&ll=30.518842,50.449242& // центр картыz=16& // масштаб картыl=map& // тип картыsize=600,325& // размер картыpt=30.523909,50.450309,pmvvm1~ // метки
30.513965,50.448296,pmpnm2&pl=c:ec473fFF,w:5,30.523927,50.450309, // ломанные
30.521978,50.447803,30.514252,50.448967,30.514027,50.448428
25
Static API
http://api.yandex.ru/maps/tools/draw/
![Page 26: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/26.jpg)
Результат
26
Static API
Создано с помощью инструментов Яндекс.Карт
![Page 27: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/27.jpg)
Геокодерпозволяет определять координаты и получать сведения о географическом объекте по его названию или адресу
27
![Page 28: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/28.jpg)
Особенности– исправление опечаток– отдает все найденное– ответы в порядке релевантности
Настройки– задание начальной области поиска (ll, spn)– ограничение количества результатов (results)– постраничный вывод (results, skip)
28
Геокодер
![Page 29: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/29.jpg)
29
Геокодер
![Page 30: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/30.jpg)
Интерфейсы• JavaScript API (YMaps.Geocoder)
возвращает набор меток
30
Геокодер
var geocoder = new YMaps.Geocoder(“Киев", {result: 1});map.addOverlay(geocoder);
ручной разбор ответа по событиям
YMaps.Events.observe(geocoder.Events.Load, function () {if (!this.length()) alert(“Ничего не найдено”);else map.addOverlay(this);
});YMaps.Events.observe(geocoder.Events.Fault, function (e) {
alert(e);});
![Page 31: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/31.jpg)
Интерфейсы• http протокол
http://geocode-maps.yandex.ru/1.x/
возвращает xml документ (YMapsML)
http://geocode-maps.yandex.ru/1.x/?key=API-ключ
geocode=Крещатик&
ll=30.489045%2C50.465093&
spn=0.749815%2C0.232289&
results=1&
skip=1
31
Геокодер
![Page 32: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/32.jpg)
Фрагмент ответа. Общая структура
32
Геокодер
<ymaps><GeoObjectCollection>
<metaDataProperty><GeocoderResponseMetaData>
<request>Крещатик</request><found>3</found><skip>1</skip>
</GeocoderResponseMetaData></metaDataProperty>
<featureMember><GeoObject>Данные результата</GeoObject>
</featureMember><GeoObjectCollection>
<ymaps>
![Page 33: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/33.jpg)
Фрагменты ответа. Результат
33
Геокодер
<kind>street</kind><text>Украина, Киев, улица Крещатик</text><precision>street</precision>
<Point><pos>30.522103 50.447728</pos>
</Point>
<boundedBy><Envelope>
<lowerCorner>30.518241 50.442388</lowerCorner><upperCorner>30.525966 50.453068</upperCorner>
</Envelope></boundedBy>
![Page 34: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/34.jpg)
YMapsML(YMaps Markup Language) – XML язык описания
геопространственных данных для отображения средствами Яндекс.Карт
34
![Page 35: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/35.jpg)
YMapsML• xml-формат работы с инструментами API
• данные + описание отображения
• базируется на стандарте GML (Geography ML)документы можно просматривать в браузерах GML
• не имеет ограничений на использованиеможно использовать без привязки к API
35
YMapsML
![Page 36: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/36.jpg)
Пример
36
YMapsML
<ymaps xmlns="http://maps.yandex.ru/ymaps/1.x" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maps.yandex.ru/schemas/ymaps/1.x/ymaps.xsd">
<GeoObjectCollection><gml:featureMembers>
<GeoObject><gml:description>
Я.Субботник в Киеве</gml:description><gml:Point>
<gml:pos>30.477559, 50.452672</gml:pos></gml:Point>
</GeoObject></gml:featureMembers>
</GeoObjectCollection></ymaps>
![Page 37: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/37.jpg)
Добавление на карту с помощью JS API
37
YMapsML
var data = new YMaps.YMapsML(“url YMapsML документа”
);map.addOverlay(data);
![Page 38: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/38.jpg)
![Page 39: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/39.jpg)
39
Сайт API Яндекс.Картhttp://api.yandex.ru/maps/
Документацияhttp://api.yandex.ru/maps/doc/
Клубhttp://clubs.ya.ru/mapsapi/
![Page 40: Александр Тармолов "API Яндекс.Карт"](https://reader031.fdocuments.net/reader031/viewer/2022013107/54622491af79597b0b8b7576/html5/thumbnails/40.jpg)
Мы постоянно улучшаем и дополняем возможности нашего API, в том числе благодаря вашим вопросам.
Вопросы?
Тармолов Александр, [email protected]
40