Your SlideShare is downloading. ×
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Использование API Яндекс.Карт
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,626

Published on

Всеволод Шмыров​​ «Использование API Яндекс.Карт» …

Всеволод Шмыров​​ «Использование 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
2,626
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 1
  • 2. 2 Использование API Яндекс.Карт. Особенности версии 2.1 Всеволод Шмыров
  • 3. 3 API Яндекс.Карт
  • 4. 4 Поддержка актуальных браузеров
  • 5. 5 Обратная совместимость
  • 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
  • 8. 8 Версия 2.1
  • 9. 9 Отличительные особенности 2.1: • Отказ от поддержки устаревших браузеров (особенно от IE 6 и 7) • Частичное изменение программного интерфейса со сломом обратной совместимости • Ориентирование на различные типы устройств
  • 10. 10 Пример http://example...
  • 11. 11 Контролы в 2.0 Пример http://bit.ly/1q8lO6O
  • 12. 12 Контролы в 2.1 Пример http://bit.ly/1qcVV7N
  • 13. 13 Пример http://bit.ly/1fXXiAG
  • 14. 14 Три состояния размера контролов Large Medium Small
  • 15. 15 Пример http://bit.ly/1fXXiAG
  • 16. 16 Пример http://bit.ly/1fXXiAG
  • 17. 17 Пример http://bit.ly/1fXXiAG
  • 18. 18
  • 19. 19 Опция size контролов button.options.set(‘size’, ‘small’); // значение по умолчанию “auto”
  • 20. 20 Своя кнопка в 2.1 Large Medium Small Пример http://jsfiddle.net/6Zv3X/1/
  • 21. 21 Своя кнопка в 2.1 new ymaps.control.Button({ data: { content: 'Моя кнопка', image: 'http://site/img.button.svg' } }); Пример http://jsfiddle.net/6Zv3X/1/
  • 22. 22 2.0 2.1
  • 23. 23 Другие изменения в контролах
  • 24. 24 Позиционирование контролов в 2.0 50px 50px
  • 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 var group = new ymaps.control.Group({ items: [ button1, button2, button3 ] }); Плавающее позиционирование в 2.0
  • 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 Элемент управления «Fullscreen» Пример http://bit.ly/1eiVG3J
  • 29. 29 Элемент управления «Fullscreen» Пример http://bit.ly/1eiVG3J
  • 30. 30 Наборы контролов
  • 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 Набор контролов для большой карты map.controls.add(‘largeMapDefaultSet’);
  • 33. 33 Набор контролов для средней карты map.controls.add(‘mediumMapDefaultSet’);
  • 34. 34 Набор контролов для маленькой карты map.controls.add(‘smallMapDefaultSet’);
  • 35. 35 Балун
  • 36. 36 Балун в 2.1 Пример http://bit.ly/1so6Ygt
  • 37. 37 Балун в маленькой карте (2.0)
  • 38. 38 Балун в маленькой карте (2.1) Пример http://bit.ly/1so6Ygt
  • 39. 39 Создание балуна геообъекта var placemark = new ymaps.Placemark( map.getCenter(), { balloonContentBody: ‘Информация в балуне’ } ); Пример http://bit.ly/1so6Ygt
  • 40. 40 Новые метки
  • 41. 41 Метки в 2.0 Пример http://bit.ly/1jlcrQa
  • 42. 42 SVG Метки 2.1 • Меньший объем загружаемых данных • Хорошо отображаются на retina дисплеях • Новые возможности для разработчиков
  • 43. 43 Метки на Retina дисплеях x1 x1 x5 x5
  • 44. 44 Стандартные макеты меток в 2.1
  • 45. 45 Стандартный макет метки в 2.1 new ymaps.Placemark( geoPosition, {}, { iconColor: '#5f3fcd' } ); Пример http://bit.ly/1e2bDRo
  • 46. 46 Новый язык шаблонов макетов
  • 47. 47 Создание своего HTML-макета var layout = ymaps.templateLayoutFactory.createClass( '<div class=customButton>123</div>' );
  • 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 Новый язык шаблонов макетов [if !data.message] Нет ни одной записи [else] $[[data.message]] $[data.sublayout] [endif] {% if !data.message %} Нет ни одной записи {% else %} {{ data.message }} {% include data.sublayout %} {% endif %}
  • 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 Подключение API
  • 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 Подключение 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 Подключение 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 Сокращение размера package.full 332 190 0 50 100 150 200 250 300 350 Версия 2.0 Версия 2.1 Размер package.full (кб)
  • 56. 56 Дозагрузка компонентов
  • 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 Интерфейс асинхронных операций
  • 59. 59 Асинхронный интерфейс в 2.0 myMap.setBounds([[60,-40], [20,60]], { checkZoomRange: true, callback: function(err) { if (err) { // Не удалось показать заданный регион // ... } } });
  • 60. 60 Асинхронный интерфейс в 2.0 var promise = ymaps.route([ 'Королев', 'Химки']); promise.then( function (route) { map.geoObjects.add(route); } );
  • 61. 61 Объект-обещание (Promise) Source Listener 1 Listener 2 Listener 3 Promise
  • 62. 62 Интерфейс Promise promise.fulfill(value); // resolve promise.reject(error); promise.then( function onFulfill (value) { … }, function onReject(error) { … } );
  • 63. 63 Асинхронный интерфейс в 2.1 • Vow; o https://github.com/dfilatov/vow • Реализует Promises/A+; o http://dom.spec.whatwg.org/#promises
  • 64. 64 Основные особенности Vow • Асинхронное получение значения; • Deferred object.
  • 65. 65 Асинхронное получение значения var promise = load(..); promise.then( function (route) { console.log('2'); } ); console.log('1');
  • 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 Объект-обещание (Promise) Source Listener 1 Listener 2 Listener 3 Promise
  • 68. 68 Deferred Object Source Listener 1 Listener 2 Listener 3 Promise Deferred Object
  • 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 Использование API на мобильных устройствах
  • 71. 71 Маппинг событий Touch Events Pointer Events mousedown mouseup mousemove click dbclick … touchstart touchend touchmove … pointerdown pointerup pointermove …
  • 72. 72 geoObject.events .add(‘click’, callback); map.events .add(‘mouseenter’, callback);
  • 73. 73 События multitouch* Для обработки множественных прикосновений • multitouchstart • multitouchmove • multitouchend
  • 74. 74 Мультитач поведение
  • 75. 75 ymaps.domEvent.manager .add( htmlElement, [‘click’, ‘mouseenter’], callback ); Пример http://bit.ly/1eq14lT
  • 76. 76 ymaps.domEvent.manager .add( htmlElement, 'multitouchstart', function (event) { // ... event.callMethod('preventDefault'); } );
  • 77. 77 Гибридные устройства
  • 78. 78 Тайлы для устройств с повышенной плотностью пикселей devicePixelRatio = 1 devicePixelRatio = 2
  • 79. 79 <meta name="viewport" content="width=device-width" />
  • 80. 80 Использование API в PhoneGap • Нельзя создавать локальную копию API Яндекс.Карт • Нужно передавать HTTP заголовок Referer вида «http://идентификатор_приложения_в_сторе.y mapapp»
  • 81. 81
  • 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 Спасибо за внимание!
  • 84. 84 Всеволод Шмыров Разработчик интерфейсов vsesh@yandex-team.ru https://www.facebook.com/vsevolod.shmyrov http://vsevolod-shmyirov.moikrug.ru/

×