API Яндекс.КартМастер-класс<br />Сергей Константинов<br />twirl@yandex-team.ru<br />
<ul><li>привязан к имени домена и логину на Яндексе
для localhostи 127.0.0.1 подойдет любой ключ
работает для поддоменов
можно перечислять несколько ключей через тильду (~)
http://api.yandex.ru/maps/form.xml</li></li></ul><li>JavaScript API<br />Начало работы<br />Подключаем API<br />Определяем...
JavaScript API<br />Взаимодействие с пользователем<br /><ul><li>Встроенные возможности карты</li></ul>(Перемещение, Масшта...
JavaScript API<br />Объекты<br /><ul><li>Метки</li></ul>YMaps.Placemark– точка<br /><ul><li>Ломаные</li></ul>YMaps.Polylin...
JavaScript API<br />Содержимое объектов<br /><ul><li>Содержимое значка метки</li></ul>placemark.setIconContent(“Текствнутр...
JavaScript API<br />Внешний вид объектов<br /><ul><li>Настройки</li></ul>YMaps.Style<br />Значок  и тень метки, вид курсор...
JavaScript API<br />Создание своей карты<br /><ul><li>Свои карточные слои</li></ul>YMaps.Layer, YMaps.TileDataSource<br />...
JavaScript API<br />Тайловые координаты<br />1024x1024<br />256x256<br />512x512<br />TileCoordinates<br />{x,y}<br />{til...
JavaScript API<br />Подготовка слоя тайлов<br /><ul><li>Загружаем изображение
Upcoming SlideShare
Loading in...5
×

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

3,453

Published on

Сергей Константинов, презентация к мастер-классу на UWDC-2010

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,453
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×