API Яндекс.Карт Мастер-класс Сергей Константинов twirl@yandex-team.ru. - презентация

1 API Яндекс.Карт Мастер-класс Сергей Константинов

2 –привязан к имени домена и логину на Яндексе –для localhost и подойдет любой ключ –работает для поддоменов –можно перечислять несколько ключей через тильду (~) –

3 1.Подключаем API 2.Определяем место на странице 3.Создаем и инициализируем карту JavaScript API Начало работы // Выберем HTML-элемент с помощью встроенного jQuery var map = new YMaps.Map(YMaps.jQuery(#mapID)[0]); map.setCenter( new YMaps.GeoPoint(39.68,47.25),// центр 10, // масштаб YMaps.MapType.MAP // тип карты );

4 –Встроенные возможности карты (Перемещение, Масштабирование двойным кликом мыши, Масштабирование колесом мыши, Лупа, Выделение правой кнопкой мыши, Горячие клавиши, Линейка) –Стандартные элементы управления (Поиск по карте, Панель инструментов, Переключатель типов карт, Элемент масштабирования, Маленький элемент масштабирования, Обзорная карта, Масштабная линия) –Интерфейс YMaps.IControl – создание ваших элементов управления JavaScript API Взаимодействие с пользователем

5 JavaScript API Элементы управления YMaps.ToolBar YMaps.SearchControlYMaps.TypeControl YMaps.Zoom YMaps.MiniMap YMaps.ScaleLine

6 –Метки YMaps.Placemark – точка –Ломаные YMaps.Polyline – набор точек –Многоугольники YMaps.Polygon – замкнутый набор точек –Интерфейс YMaps.IOverlay – создание ваших объектов JavaScript API Объекты

7 –Группировка YMaps.GeoObjectCollection –Управление видимостью YMaps.ObjectManager – только метки –Редактирование YMaps.PlacemarkOptions.draggable – перетаскивание YMaps.(Polyline|Polygon).startEditing – визуальное редактирование JavaScript API Управление объектами

8 –Содержимое значка метки placemark.setIconContent(Текст внутри метки); –Всплывающая подсказка object.setHintContent(Текст всплывающей подсказки); –Балун object.setBalloonContent( Привет! Я балун! ); JavaScript API Содержимое объектов

9 –Настройки YMaps.Style Значок и тень метки, вид курсора, цвет и толщина линий для ломаных и многоугольников, заливка для многоугольников –Текстовые шаблоны YMaps.Template Значок метки, балун, всплывающая подсказка –Динамические шаблоны – макеты YMaps.ILayout, YMaps.IPlacemarkLayout, YMaps.IHintLayout, YMaps.IBalloonLayout Значок метки, балун, всплывающая подсказка и содержимое каждого из них JavaScript API Внешний вид объектов

10 –Свои карточные слои YMaps.Layer, YMaps.TileDataSource Свой шаблон URL тайла, настройка прозрачности –Свои типы карты «Вклеивание» своей карты в карту Яндекса –API для фотографий и чертежей YMaps.CartesianCoordSystem Работа в прямоугольной системе координат c удобными единицами измерения –Свои координатные системы, слои и тайлы YMaps.ICoordSystem, YMaps.ICoordPoint, YMaps.ICoordBounds, YMaps.ILayer, YMaps.ITile JavaScript API Создание своей карты

11 JavaScript API Тайловые координаты 256x256512x x1024 TileCoordinates {x,y}{tileX,tileY, tileOffset}

12 –Загружаем изображение –Отмечаем опорные точки Карта готова! JavaScript API Подготовка слоя тайлов

13 Вопросы? Клуб – Блог – Документация – Сайт API Яндекс.Карт – Сергей Константинов