Embed Size (px)
DESCRIPTION
Фёдор Голубев, Леонид Шныр "Яндекс.Карты: между пользователем и разработчиком" Первый Я.Субботник в Алматы
Citation preview
Яндекс.Карты: между пользователем и
разработчиком
Федор Голубев[email protected]
Леонид Шныр[email protected]
Яндекс.Карты
– подробные карты Алматы и Астаны– 111 городов России
– 36 городов Украины
– карта всего мира
– много специальных технологий, инструментов
Яндекс.Карты:
Яндекс.Карты
Схема СпутникГибрид
API Яндекс.Карт — бесплатный сервис
?
?
?
?
?
– привязан к имени домена и логину на Яндексе
– для localhost и 127.0.0.1 подойдет любой ключ
– работает для поддоменов
– http://api.yandex.ru/maps/form.xml
API ключ
JavaScript APIJavaScript APIинструмент взаимодействия с картойинструмент взаимодействия с картой
– объектно-ориентированная библиотека
– одно пространство имен YMaps
– событийная модель
– jQuery внутри (1.3.2)
– 95 Кб (loadByRequire: 3 Кб)
– текущая версия 1.1 (1.1.4)
JavaScript API
1. Подключаем API
2. Определяем место на странице
3. Создаем и инициализируем карту
Начало работы
<script src=“http://api-maps.yandex.ru/{версия}/key={ключ}”/>
<div id=“mapID” style=“width:200px; height:200px;”>
var map = new YMaps.Map(YMaps.jQuery(“#mapID”));map.setCenter(
new YMaps.GeoPoint(39.68,47.25), // центр10, // масштабYMaps.MapType.MAP // тип карты
);
JavaScript API
– Встроенные возможности карты(Перемещение, Масштабирование двойным кликом мыши, Масштабирование колесиком мыши, Лупа, Выделение правой кнопкой мыши, Горячие клавиши, Линейка)
– Стандартные элементы управления(Поиск по карте, Панель инструментов, Переключатель типов карт, Элемент масштабирования, Маленький элемент масштабирования, Обзорная карта, Масштабная линия)
– Интерфейс YMaps.IControl – создание ваших элементов управления
Взаимодействие с пользователем
JavaScript API
– МеткиYMaps.Placemark – точка
– ЛоманыеYMaps.Polyline – множество точек соединенных отрезками
– МногоугольникиYMaps.Polygon – область ограниченная замкнутой ломаной
– Интерфейс YMaps.IOverlay – создание ваших объектов
Объекты
JavaScript API
– НастройкиYMaps.Style
значок и тень метки, цвет, толщина и заливка для ломаных и многоугольников
– Текстовые шаблоныYMaps.Template
значок метки, балун, всплывающая подсказка
– Динамические шаблоны – макетыYMaps.ILayout, YMaps.IPlacemarkLayout, YMaps.IHintLayout,YMaps.IBalloonLayout
значок метки, балун, всплывающая подсказка и содержимое каждого из них
Внешний вид объектов
JavaScript API
– ГруппировкаYMaps.GeoObjectCollection
– Управление видимостьюYMaps.ObjectManager – только метки
– РедактированиеYMaps.PlacemarkOptions.draggable – перетаскивание
YMaps.(Polyline|Polygon).startEditing – визуальное редактирование
Управление объектами
JavaScript API
JavaScript API
?
?
?
?
• Здесь нужна картинка кальки
Static APIStatic APIвозвращает фрагмент карты в ответвозвращает фрагмент карты в ответ на на HTTPHTTP--запросзапрос
– малый объем загружаемых данных(600x450: ~100 Кб)
– максимальная простота
– идеально для:– печати
– мобильных устройств
– картинок в блог
– схем проезда
Static API
– Размерsize – размер изображения в пикселях
– Область показаll, spn или z – географические координаты центра и масштаб
– Тип картыl – список слоев (map, sat, skl)
– Объектыpm – метки (размер, цвет, номер)
pl – ломаные (цвет, ширина)
Настройки
Static API
JavaScript API
Static API
?
?
?
ГеокодерГеокодерпозволяет определять координаты и позволяет определять координаты и получать ведения о географическом получать ведения о географическом объекте по его названию или адресуобъекте по его названию или адресу
– обратное геокодирование– определение адреса объекта по его координатам
– исправление опечаток
– задание начальной области поиска
– ограничение области поиска– искать только внутри области
– отдает все найденное в порядке релевантности
– постраничный вывод
Геокодер
– Объект YMaps.Geocoderпрограммный интерфейс, возвращает набор меток
– Элемент управления YMaps.SearchControl
– http протоколhttp://geocode-maps.yandex.ru/1.x/
возвращает xml документ со списком объектов
Интерфейсы
Геокодер
Static API
?
?
Геокодер
JavaScript API
МаршрутизаторМаршрутизаторсервис автоматического прокладывания сервис автоматического прокладывания маршрутовмаршрутов
– принимает на вход как координаты, так и адреса
– промежуточные точки
– объект YMaps.Router
– возвращает– протяженность и время
– маршрутный лист
– ломаную пути разбитую на сегменты согласно маршрутному листу
– beta, ездит только по Москве
Маршрутизатор
Static API
?
Маршрутизатор
Геокодер
JavaScript API
YMapsMLYMapsML((YMapsYMaps Markup Language) Markup Language) –– XML XML формат формат описания описания геопространственныхгеопространственных данныхданных
– xml-формат работы с инструментами API
– данные + описание отображения
– базируется на стандарте GML (Geography ML)документы можно просматривать в браузерах GML
– не имеет ограничений на использование
– объект YMaps.YMapsML
– автоматическая симплификация ломаных и многоугольников
YMapsML
Static API
YMapsML
Маршрутизатор
Геокодер
JavaScript API
API Яндекс.Карт
Можно всё! что нужно )
– На сайте коммерческой фирмы? — можно!
– А если обязательная регистрация? — можно!
– И рекламу можно? — да!!!
Всё что нужно для успешного интернет-проекта?
— да!
«Конструктор схем проезда» = карта за 2 минуты
Конструктор
+
Вопросы?
Клуб – http://clubs.ya.ru/mapsapi/
Саппорт – [email protected]
Документация – http://api.yandex.ru/maps/doc/
Сайт API Яндекс.Карт – http://api.yandex.ru/maps/
Федор Голубев[email protected]
Леонид Шныр[email protected]
