– привязан к имени домена и логину на Яндексе
– для 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/
Сергей Константинов
Recommended
