API Яндекс.Карт. Мастер-класс
-
Upload
yandexmaps -
Category
Technology
-
view
3.421 -
download
3
description
Transcript of API Яндекс.Карт. Мастер-класс
![Page 2: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/2.jpg)
– привязан к имени домена и логину на Яндексе
– для localhost и 127.0.0.1 подойдет любой ключ
– работает для поддоменов– можно перечислять несколько ключей
через тильду (~)– http://api.yandex.ru/maps/form.xml
![Page 3: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/3.jpg)
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 // тип карты);
![Page 4: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/4.jpg)
– Встроенные возможности карты(Перемещение, Масштабирование двойным кликом мыши, Масштабирование колесом мыши, Лупа, Выделение правой кнопкой мыши, Горячие клавиши, Линейка)
– Стандартные элементы управления(Поиск по карте, Панель инструментов, Переключатель типов карт, Элемент масштабирования, Маленький элемент масштабирования, Обзорная карта, Масштабная линия)
– Интерфейс YMaps.IControl – создание ваших элементов управления
JavaScript API
Взаимодействие с пользователем
![Page 5: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/5.jpg)
JavaScript API
Элементы управленияYMaps.ToolBar YMaps.SearchControl YMaps.TypeControl
YMaps.Zoom
YMaps.MiniMapYMaps.ScaleLine
![Page 6: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/6.jpg)
– МеткиYMaps.Placemark – точка
– ЛоманыеYMaps.Polyline – набор точек
– МногоугольникиYMaps.Polygon – замкнутый набор точек
– Интерфейс YMaps.IOverlay – создание ваших объектов
JavaScript API
Объекты
![Page 7: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/7.jpg)
– ГруппировкаYMaps.GeoObjectCollection
– Управление видимостьюYMaps.ObjectManager – только метки
– РедактированиеYMaps.PlacemarkOptions.draggable – перетаскивание
YMaps.(Polyline|Polygon).startEditing – визуальное редактирование
JavaScript API
Управление объектами
![Page 8: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/8.jpg)
– Содержимое значка меткиplacemark.setIconContent(“Текст внутри метки”);
– Всплывающая подсказкаobject.setHintContent(“Текст всплывающей подсказки”);
– Балунobject.setBalloonContent(“<h3>Привет!</h3><p>Я балун!</p>”);
JavaScript API
Содержимое объектов
![Page 9: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/9.jpg)
– НастройкиYMaps.Style
Значок и тень метки, вид курсора, цвет и толщина линий для ломаных и многоугольников, заливка для многоугольников
– Текстовые шаблоныYMaps.Template
Значок метки, балун, всплывающая подсказка
– Динамические шаблоны – макетыYMaps.ILayout, YMaps.IPlacemarkLayout, YMaps.IHintLayout, YMaps.IBalloonLayout
Значок метки, балун, всплывающая подсказка и содержимое каждого из них
JavaScript API
Внешний вид объектов
![Page 10: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/10.jpg)
– Свои карточные слоиYMaps.Layer, YMaps.TileDataSource
Свой шаблон URL тайла, настройка прозрачности
– Свои типы карты«Вклеивание» своей карты в карту Яндекса
– API для фотографий и чертежейYMaps.CartesianCoordSystem
Работа в прямоугольной системе координат c удобными единицами измерения
– Свои координатные системы, слои и тайлыYMaps.ICoordSystem, YMaps.ICoordPoint, YMaps.ICoordBounds,YMaps.ILayer, YMaps.ITile
JavaScript API
Создание своей карты
![Page 11: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/11.jpg)
JavaScript API
Тайловые координаты
256x256 512x512 1024x1024
TileCoordinates
{x,y} {tileX,tileY, tileOffset}
![Page 12: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/12.jpg)
– Загружаем изображение
– Отмечаем опорные точки
Карта готова!
JavaScript API
Подготовка слоя тайлов
![Page 13: API Яндекс.Карт. Мастер-класс](https://reader036.fdocuments.net/reader036/viewer/2022062312/5563029dd8b42a6f598b510d/html5/thumbnails/13.jpg)
Вопросы?
Клуб – http://clubs.ya.ru/mapsapi/
Блог – http://ymapsapi.ya.ru/
Документация – http://api.yandex.ru/maps/doc/
Сайт API Яндекс.Карт – http://api.yandex.ru/maps/
Сергей Константинов