Использование API Яндекс.Карт

3,071
-1

Published on

Всеволод Шмыров​​ «Использование API Яндекс.Карт»
Frontend Dev Conf'14
www.fdconf.by

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

No Downloads
Views
Total Views
3,071
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Использование API Яндекс.Карт

  1. 1. 1
  2. 2. 2 Использование API Яндекс.Карт. Особенности версии 2.1 Всеволод Шмыров
  3. 3. 3 API Яндекс.Карт
  4. 4. 4 Поддержка актуальных браузеров
  5. 5. 5 Обратная совместимость
  6. 6. 6 Версии API … 2.0.33 2.0.34 2.1-b 2.1.1 2.1.2 …2.1.3 2.0.35 2.0.36 2.0.37 …2.0.38
  7. 7. 7
  8. 8. 8 Версия 2.1
  9. 9. 9 Отличительные особенности 2.1: • Отказ от поддержки устаревших браузеров (особенно от IE 6 и 7) • Частичное изменение программного интерфейса со сломом обратной совместимости • Ориентирование на различные типы устройств
  10. 10. 10 Пример http://example...
  11. 11. 11 Контролы в 2.0 Пример http://bit.ly/1q8lO6O
  12. 12. 12 Контролы в 2.1 Пример http://bit.ly/1qcVV7N
  13. 13. 13 Пример http://bit.ly/1fXXiAG
  14. 14. 14 Три состояния размера контролов Large Medium Small
  15. 15. 15 Пример http://bit.ly/1fXXiAG
  16. 16. 16 Пример http://bit.ly/1fXXiAG
  17. 17. 17 Пример http://bit.ly/1fXXiAG
  18. 18. 18
  19. 19. 19 Опция size контролов button.options.set(‘size’, ‘small’); // значение по умолчанию “auto”
  20. 20. 20 Своя кнопка в 2.1 Large Medium Small Пример http://jsfiddle.net/6Zv3X/1/
  21. 21. 21 Своя кнопка в 2.1 new ymaps.control.Button({ data: { content: 'Моя кнопка', image: 'http://site/img.button.svg' } }); Пример http://jsfiddle.net/6Zv3X/1/
  22. 22. 22 2.0 2.1
  23. 23. 23 Другие изменения в контролах
  24. 24. 24 Позиционирование контролов в 2.0 50px 50px
  25. 25. 25 Абсолютное позиционирование в 2.0 map.controls.add(button1, {top: 50, left: 50}); map.controls.add(button2, {top: 50, left: 105}); map.controls.add(button3, {top: 50, left: 160});
  26. 26. 26 var group = new ymaps.control.Group({ items: [ button1, button2, button3 ] }); Плавающее позиционирование в 2.0
  27. 27. 27 Позиционирование контролов в 2.1 map.controls.add(button3, {float: 'right', floatIndex: 1}); map.controls.add(button4, {position: {top: 50, right: 50}}); Пример http://bit.ly/PAGSrA
  28. 28. 28 Элемент управления «Fullscreen» Пример http://bit.ly/1eiVG3J
  29. 29. 29 Элемент управления «Fullscreen» Пример http://bit.ly/1eiVG3J
  30. 30. 30 Наборы контролов
  31. 31. 31 var map = new ymaps.Map('map', { center: [53.90473, 27.551899], zoom: 10 }); map.controls .add('zoomControl') .add('typeSelector') .add('trafficControl') .add('mapTools'); var map = new ymaps.Map('map', { center: [53.90473, 27.551899], zoom: 10 //, controls: [] }); Пример http://bit.ly/1h4lVzT
  32. 32. 32 Набор контролов для большой карты map.controls.add(‘largeMapDefaultSet’);
  33. 33. 33 Набор контролов для средней карты map.controls.add(‘mediumMapDefaultSet’);
  34. 34. 34 Набор контролов для маленькой карты map.controls.add(‘smallMapDefaultSet’);
  35. 35. 35 Балун
  36. 36. 36 Балун в 2.1 Пример http://bit.ly/1so6Ygt
  37. 37. 37 Балун в маленькой карте (2.0)
  38. 38. 38 Балун в маленькой карте (2.1) Пример http://bit.ly/1so6Ygt
  39. 39. 39 Создание балуна геообъекта var placemark = new ymaps.Placemark( map.getCenter(), { balloonContentBody: ‘Информация в балуне’ } ); Пример http://bit.ly/1so6Ygt
  40. 40. 40 Новые метки
  41. 41. 41 Метки в 2.0 Пример http://bit.ly/1jlcrQa
  42. 42. 42 SVG Метки 2.1 • Меньший объем загружаемых данных • Хорошо отображаются на retina дисплеях • Новые возможности для разработчиков
  43. 43. 43 Метки на Retina дисплеях x1 x1 x5 x5
  44. 44. 44 Стандартные макеты меток в 2.1
  45. 45. 45 Стандартный макет метки в 2.1 new ymaps.Placemark( geoPosition, {}, { iconColor: '#5f3fcd' } ); Пример http://bit.ly/1e2bDRo
  46. 46. 46 Новый язык шаблонов макетов
  47. 47. 47 Создание своего HTML-макета var layout = ymaps.templateLayoutFactory.createClass( '<div class=customButton>123</div>' );
  48. 48. 48 Пример создания своей HTML метки layout = ym.templateLayoutFactory.createClass( '<div class=placemark></div>' ), placemark = new ym.Placemark( map.getCenter(), {}, { iconLayout: layout }); Пример http://bit.ly/1jlcPOJ
  49. 49. 49 Новый язык шаблонов макетов [if !data.message] Нет ни одной записи [else] $[[data.message]] $[data.sublayout] [endif] {% if !data.message %} Нет ни одной записи {% else %} {{ data.message }} {% include data.sublayout %} {% endif %}
  50. 50. 50 Итерация в шаблоне макета var balloonLayout = ymaps.templateLayoutFactory.createClass( '<ul>' + '{% for listItem in properties.wishList %}' + '<li>{{ listItem }}</li>' + '{% endfor %}' + '</ul>' ); var placemark = new ymaps.Placemark( map.getCenter(), { wishList: [ 'Дорогая машина', 'Дом на побережье', 'Portal gun' ] }, { balloonContentLayout: balloonLayout } ); Пример http://bit.ly/1q8jsom
  51. 51. 51 Подключение API
  52. 52. 52 Пакеты в версии 2.0 <script src="http://api-maps.yandex.ru/2.0/?load=package.map, package.controls&lang=ru-RU" type="text/javascript"></script> package.map Layer LayerCollection Map MapEvent MapType Monitor … package.controls control.Button control.Group control.ListBox control.ListBoxItem control.MapTools control.RollupButton …
  53. 53. 53 Подключение API 2.0 <script src="http://api- maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script> package.full package.map package.controls package.search package.geoObjects package.clusters package.overlays …
  54. 54. 54 Подключение API 2.1 <script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU" type="text/javascript"></script> package.full Map GeoObject Clusterer Layer GeoObjectCollection control.Button …
  55. 55. 55 Сокращение размера package.full 332 190 0 50 100 150 200 250 300 350 Версия 2.0 Версия 2.1 Размер package.full (кб)
  56. 56. 56 Дозагрузка компонентов
  57. 57. 57 Подключение API 2.1 Placemark Clusterer Map <script src="http://api-maps.yandex.ru/2.1- dev/?load=Map,Placemark,Clusterer&lang=ru-RU" type="text/javascript"></script>
  58. 58. 58 Интерфейс асинхронных операций
  59. 59. 59 Асинхронный интерфейс в 2.0 myMap.setBounds([[60,-40], [20,60]], { checkZoomRange: true, callback: function(err) { if (err) { // Не удалось показать заданный регион // ... } } });
  60. 60. 60 Асинхронный интерфейс в 2.0 var promise = ymaps.route([ 'Королев', 'Химки']); promise.then( function (route) { map.geoObjects.add(route); } );
  61. 61. 61 Объект-обещание (Promise) Source Listener 1 Listener 2 Listener 3 Promise
  62. 62. 62 Интерфейс Promise promise.fulfill(value); // resolve promise.reject(error); promise.then( function onFulfill (value) { … }, function onReject(error) { … } );
  63. 63. 63 Асинхронный интерфейс в 2.1 • Vow; o https://github.com/dfilatov/vow • Реализует Promises/A+; o http://dom.spec.whatwg.org/#promises
  64. 64. 64 Основные особенности Vow • Асинхронное получение значения; • Deferred object.
  65. 65. 65 Асинхронное получение значения var promise = load(..); promise.then( function (route) { console.log('2'); } ); console.log('1');
  66. 66. 66 Синхронный Promise в jQuery function animate(duration) { $('div').animate({opacite: 0}, duration).promise() .then(function () { console.log('2'); }); console.log('1'); } animate(0); // 2 1 console.log('--'); animate(1); // 1 2 Пример http://bit.ly/1mUwrKi
  67. 67. 67 Объект-обещание (Promise) Source Listener 1 Listener 2 Listener 3 Promise
  68. 68. 68 Deferred Object Source Listener 1 Listener 2 Listener 3 Promise Deferred Object
  69. 69. 69 Методы Vow Promise API • fulfill • reject • notify • isFulfilled • isRejected • isResolved • valueOf • then • fail • always • progress • spread • done • delay • timeout • sync Vow API • isPromise • when • fail • always • progress • spread • done • isFulfilled • isRejected • isResolved • fulfill • reject • resolve • invoke • all • allResolved • any • delay • timeout Пример http://bit.ly/1jldyQ3
  70. 70. 70 Использование API на мобильных устройствах
  71. 71. 71 Маппинг событий Touch Events Pointer Events mousedown mouseup mousemove click dbclick … touchstart touchend touchmove … pointerdown pointerup pointermove …
  72. 72. 72 geoObject.events .add(‘click’, callback); map.events .add(‘mouseenter’, callback);
  73. 73. 73 События multitouch* Для обработки множественных прикосновений • multitouchstart • multitouchmove • multitouchend
  74. 74. 74 Мультитач поведение
  75. 75. 75 ymaps.domEvent.manager .add( htmlElement, [‘click’, ‘mouseenter’], callback ); Пример http://bit.ly/1eq14lT
  76. 76. 76 ymaps.domEvent.manager .add( htmlElement, 'multitouchstart', function (event) { // ... event.callMethod('preventDefault'); } );
  77. 77. 77 Гибридные устройства
  78. 78. 78 Тайлы для устройств с повышенной плотностью пикселей devicePixelRatio = 1 devicePixelRatio = 2
  79. 79. 79 <meta name="viewport" content="width=device-width" />
  80. 80. 80 Использование API в PhoneGap • Нельзя создавать локальную копию API Яндекс.Карт • Нужно передавать HTTP заголовок Referer вида «http://идентификатор_приложения_в_сторе.y mapapp»
  81. 81. 81
  82. 82. 82 Ссылки Официальная группа в Facebook https://www.facebook.com/ymapsapi Официальная группа в ВК http://vk.com/ymapsapi Клуб разработчиков API Яндекс.Карт http://clubs.ya.ru/mapsapi/ Документация версии 2.1 http://api.yandex.ru/maps/doc/jsapi/beta/ref/concepts/About.xml
  83. 83. 83 Спасибо за внимание!
  84. 84. 84 Всеволод Шмыров Разработчик интерфейсов vsesh@yandex-team.ru https://www.facebook.com/vsevolod.shmyrov http://vsevolod-shmyirov.moikrug.ru/
  1. A particular slide catching your eye?

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

×