Фёдор Голубев "API Яндекс.Карт"
0 likes•1,184 views
Документ описывает API Яндекс.Карт, предоставляющий инструменты для интеграции карт на сайты, включая различные функции и возможности, такие как создание карт, использование геокодера и настройки внешнего вида объектов. Упоминаются также разные API, такие как JavaScript API и static API, а также примеры их использования. Информация включает детали подключения, работу с элементами управления, объектах на карте и примерах кода.
![JavaScript API
Шаблоны (Template)
• html разметка со вставками данных
var htmlText = "<h2><img src="$[style.iconStyle.href] "/>$[name]</h2>
<p>$[description|без комментариев]</p>"
• возможность доступа по ключу
YMaps.Templates.add("my#template", new YMaps.Template(htmlText));
…
var template = YMaps.Templates.get("my#template");
+ переопределив метод build можно реализовать
свою шаблонизацию
15](https://image.slidesharecdn.com/apimaps-120626110934-phpapp02/85/API-15-320.jpg)
Фёдор Голубев "API Яндекс.Карт"
- 1. API Яндекс.Карт Голубев Федор Разработчик Яндекс.Карт, [email protected] 1
- 3. Можно сделать бесконечное количество сервисов, например: • схема проезда (http://gazmanov.ru/contacts/) • карта нескольких офисов (http://company.yandex.ru/) • «где выпить?», ближайший бар (http://tyndr.ru/places/) • портал города/области (http://www.66.ru/) • база недвижимости (http://www.cian.ru/) • события на карте (http://news.yandex.ru) + ваш сервис
- 4. API Яндекс.Карт — это набор инструментов, позволяющий встраивать карты Яндекса на ваш сайт.
- 5. Инструменты API: • JavaScript API • Static API • Геокодер • YMapsML 5
- 6. Для работы c API требуется ключ • ключ привязан к имени домена • для localhost и 127.0.0.1 подойдет любой ключ • работает для поддоменов ключ для domen.ru подойдет к www.domen.ru, blog.domen.ru • http://api.yandex.ru/maps/form.xml 6
- 7. JavaScript API библиотека JavaScript объектов текущая версия 1.0.1 7
- 8. 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); 8
- 9. JavaScript API Создание карты 1. определяем контейнер карты <div id="mapID" style="height:200px; width=200px; "> 2. создаем карту var map = new YMaps.Map(document.getElementById("mapID")); 3. инициализируем (центр, масштаб, тип карты): map.setCenter( new YMaps.GeoPoint(37.63, 55.75), // центр 10, // масштаб YMaps.MapType.MAP // тип карты ); 9
- 10. JavaScript API Встроенные возможности карты • Перетаскивание (Dragging) • Масштабирование (ScrollZoom, DblClickZoom) • Выделение рамкой (Magnifier) • Горячие клавиши (HotKeys) • Линейка (Ruler) map.enable{Возможность}() -> map.enableRuler() map.disable{Возможность} -> map.disableRuler() map.{возможность}Enabled() -> map.rulerEnabled() 10
- 11. JavaScript API Элементы управления (Controls) • Элемент масштабирования (Zoom, SmallZoom) • Обзорная карта (MiniMap) • Переключатель типов (TypeControl) + ваши типы карт • Масштабная линия (ScaleLine) • Панель инструментов (ToolBar) + ваши кнопки + ваши элементы управления (IControl). map.addControl(IControl, controlPosition) map.removeControl(IControl) 11
- 12. JavaScript API ToolBar TypeControl Zoom MiniMap ScaleLine 12
- 13. JavaScript API Объекты на карте (Overlay) • Метки (Placemark) • Полилинии (Polyline) + ваши объекты (IOverlay) • Группировка объектов (OverayGroup, GeoObjectCollection) • Управление видимостью объектов (ObjectManager) map.addOverlay(overlay) map.removeOverlay(overlay) 13
- 14. JavaScript API Настройка внешнего вида объектов • Шаблоны (Template) • Стили (Style) 14
- 15. JavaScript API Шаблоны (Template) • html разметка со вставками данных var htmlText = "<h2><img src="$[style.iconStyle.href] "/>$[name]</h2> <p>$[description|без комментариев]</p>" • возможность доступа по ключу YMaps.Templates.add("my#template", new YMaps.Template(htmlText)); … var template = YMaps.Templates.get("my#template"); + переопределив метод build можно реализовать свою шаблонизацию 15
- 16. JavaScript API Стили (Style) • набор предопределенных стилей "default#whitePoint“ ( ) , "default#greenPoint“ ( ), … • механизм наследования значения которых нет в дочернем стиле, ищутся в родительском • привязка шаблонов style.balloonContentStyle.setTemplate("my#template"); • возможность доступа по ключу 16
- 17. JavaScript API Пример 17
- 18. Static API возвращает изображение с картой в ответ на HTTP-запрос, передаваемый посредством URL с параметрами 18
- 19. Static API Особенности • меньший объем загружаемых данных • отсутствие JavaScript • максимальная простота Идеально для • версий для печати • простых схем проезда • картинок в блог • карт на устройствах с ограниченной поддержкой JavaScript 19
- 20. Static API Параметры • размер карты (size) максимум 600 на 450 пикселей • область карты • центр (ll, spn) • масштаб (z) • тип карты (l) • объекты на карте • метки (pm) • полилинии (pl) 20
- 21. Static API Пример http://static-maps.yandex.ru/1.x/? key={Api-ключ}& size=600,300& // размер карты l=map& // тип карты pl=37.65,55.74,37.66,55.75& // полилиния pt=37.65,55.74 ~37.66,55.75,pmblm1 // метки 21
- 22. Геокодер позволяет определять координаты и получать сведения о географическом объекте по его названию или адресу 22
- 23. Геокодер Особенности • исправление опечаток • отдает все найденное • ответы в порядке релевантности Настройки • задание области поиска (ll, spn) • ограничение количества результатов (result) • постраничный вывод (result, skip) 23
- 24. Геокодер изображение поисковой выдачи беты 24
- 25. Геокодер Интерфейсы • JavaScript API (YMaps.Geocoder) возвращает набор меток var geocoder = new YMaps.Geocoder("Москва", options); map.addOverlay(geocoder); • http протокол (http://geocode-maps.yandex.ru/) возвращает YMapsML документ http://geocode-maps.yandex.ru/1.x/?geocode=Москва&key=API-ключ 25
- 26. Геокодер Фрагмент ответа геокодера <featureMember><GeoObject> <metaDataProperty><GeocoderMetaData> <kind>locality</kind> <text>Россия, Москва</text> <precision>other</precision> <AddressDetails xmlns="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0"> <Country> <CountryName>Россия</CountryName> <Locality> <LocalityName>Москва</LocalityName> </Locality> </Country> </AddressDetails> </GeocoderMetaData></metaDataProperty> <boundedBy><Envelope> <lowerCorner>37.177964 55.436075</lowerCorner> <upperCorner>38.040472 56.068469</upperCorner> </Envelope></boundedBy> <Point><pos>37.609218 55.753559</pos></Point> </GeoObject></featureMember> 26
- 27. YMapsML (YMaps Markup Language) – XML язык описания геопространственных данных для отображения средствами Яндекс.Карт 27
- 28. YMapsML YMapsML • xml-формат работы с инструментами API • данные + описание отображения • базируется на стандарте GML (Geography ML) документы можно просматривать в браузерах GML • не имеет ограничений на использование можно использовать без привязки к API 28
- 29. 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:name>Объекты карте</gml:name> <gml:featureMembers> <GeoObject> <gml:name>Имя</gml:name> <gml:description>Описание</gml:description> <gml:Point> <gml:pos>37.63 55.75</gml:pos> </gml:Point> </GeoObject> </gml:featureMembers> </GeoObjectCollection> </ymaps> 29
- 30. YMapsML Добавление на карту с помощью JavaScript API var data = new YMaps.YMapsML( "http://api.yandex.ru/maps/ymapsml/examples/xml/simpleobject.xml" ); map.addOverlay(data); 30
- 32. Мы постоянно улучшаем и дополняем возможности нашего API, в том числе благодаря вашим вопросам. Вопросы? Голубев Федор, [email protected] 32