Слайд 1 - UWDC`2010

API Яндекс.Карт
Мастер-класс
Сергей Константинов
[email protected]
– привязан к имени домена и логину на
Яндексе
– для localhost и 127.0.0.1 подойдет
любой ключ
– работает для поддоменов
– можно перечислять несколько ключей
через тильду (~)
– http://api.yandex.ru/maps/form.xml
JavaScript API
Начало работы
1. Подключаем API
<script src=“http://api-maps.yandex.ru/{версия}/?key={ключ}”/>
2. Определяем место на странице
<div id=“mapID” style=“width:200px; height:200px”/>
3. Создаем и инициализируем карту
// Выберем HTML-элемент с помощью встроенного jQuery
var map = new YMaps.Map(YMaps.jQuery(“#mapID”)[0]);
map.setCenter(
new YMaps.GeoPoint(39.68,47.25),
// центр
10,
// масштаб
YMaps.MapType.MAP
// тип карты
);
JavaScript API
Взаимодействие с пользователем
– Встроенные возможности карты
(Перемещение, Масштабирование двойным кликом мыши, Масштабирование
колесом мыши, Лупа, Выделение правой кнопкой мыши, Горячие клавиши,
Линейка)
– Стандартные элементы управления
(Поиск по карте, Панель инструментов, Переключатель типов карт, Элемент
масштабирования, Маленький элемент масштабирования, Обзорная карта,
Масштабная линия)
– Интерфейс YMaps.IControl – создание ваших
элементов управления
JavaScript API
Элементы управления
YMaps.ToolBar
YMaps.SearchControl
YMaps.TypeControl
YMaps.Zoom
YMaps.MiniMap
YMaps.ScaleLine
JavaScript API
Объекты
– Метки
YMaps.Placemark – точка
– Ломаные
YMaps.Polyline – набор точек
– Многоугольники
YMaps.Polygon – замкнутый набор точек
– Интерфейс YMaps.IOverlay – создание ваших
объектов
JavaScript API
Управление объектами
– Группировка
YMaps.GeoObjectCollection
– Управление видимостью
YMaps.ObjectManager – только метки
– Редактирование
YMaps.PlacemarkOptions.draggable – перетаскивание
YMaps.(Polyline|Polygon).startEditing – визуальное редактирование
JavaScript API
Содержимое объектов
– Содержимое значка метки
placemark.setIconContent(“Текст внутри метки”);
– Всплывающая подсказка
object.setHintContent(“Текст всплывающей подсказки”);
– Балун
object.setBalloonContent(“<h3>Привет!</h3><p>Я балун!</p>”);
JavaScript API
Внешний вид объектов
– Настройки
YMaps.Style
Значок и тень метки, вид курсора, цвет и толщина линий для ломаных и
многоугольников, заливка для многоугольников
– Текстовые шаблоны
YMaps.Template
Значок метки, балун, всплывающая подсказка
– Динамические шаблоны – макеты
YMaps.ILayout, YMaps.IPlacemarkLayout, YMaps.IHintLayout,
YMaps.IBalloonLayout
Значок метки, балун, всплывающая подсказка и содержимое каждого из них
JavaScript API
Создание своей карты
– Свои карточные слои
YMaps.Layer, YMaps.TileDataSource
Свой шаблон URL тайла, настройка прозрачности
– Свои типы карты
«Вклеивание» своей карты в карту Яндекса
– API для фотографий и чертежей
YMaps.CartesianCoordSystem
Работа в прямоугольной системе координат c удобными единицами измерения
– Свои координатные системы, слои и тайлы
YMaps.ICoordSystem, YMaps.ICoordPoint, YMaps.ICoordBounds,
YMaps.ILayer, YMaps.ITile
JavaScript API
Тайловые координаты
256x256
1024x1024
512x512
TileCoordinates
{x,y}
{tileX,tileY, tileOffset}
JavaScript API
Подготовка слоя тайлов
– Загружаем изображение
– Отмечаем опорные точки
Карта готова!
Вопросы?
Клуб – http://clubs.ya.ru/mapsapi/
Блог – http://ymapsapi.ya.ru/
Документация – http://api.yandex.ru/maps/doc/
Сайт API Яндекс.Карт – http://api.yandex.ru/maps/
Сергей Константинов
[email protected]