api Яндекс.Карт. Мастер-класс

API Яндекс.КартМастер-класс

Сергей Константиновtwirl@yandex-team.ru

– привязан к имени домена и логину на Яндексе

– для localhost и 127.0.0.1 подойдет любой ключ

– работает для поддоменов– можно перечислять несколько ключей

через тильду (~)– http://api.yandex.ru/maps/form.xml

1. Подключаем API

2. Определяем место на странице

3. Создаем и инициализируем карту

JavaScript API

Начало работы

<script src=“http://api-maps.yandex.ru/{версия}/?key={ключ}”/>

<div id=“mapID” style=“width:200px; height:200px”/>

// Выберем HTML-элемент с помощью встроенного jQueryvar map = new YMaps.Map(YMaps.jQuery(“#mapID”)[0]);map.setCenter( new YMaps.GeoPoint(39.68,47.25), // центр 10, // масштаб YMaps.MapType.MAP // тип карты);

– Встроенные возможности карты(Перемещение, Масштабирование двойным кликом мыши, Масштабирование колесом мыши, Лупа, Выделение правой кнопкой мыши, Горячие клавиши, Линейка)

– Стандартные элементы управления(Поиск по карте, Панель инструментов, Переключатель типов карт, Элемент масштабирования, Маленький элемент масштабирования, Обзорная карта, Масштабная линия)

– Интерфейс YMaps.IControl – создание ваших элементов управления

JavaScript API

Взаимодействие с пользователем

JavaScript API

Элементы управленияYMaps.ToolBar YMaps.SearchControl YMaps.TypeControl

YMaps.Zoom

YMaps.MiniMapYMaps.ScaleLine

– Метки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

Создание своей карты

JavaScript API

Тайловые координаты

256x256 512x512 1024x1024

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/

Сергей Константинов

twirl@yandex-team.ru