Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
2
Использование
API Яндекс.Карт.
Особенности версии 2.1
Всеволод Шмыров
3
API Яндекс.Карт
4
Поддержка актуальных браузеров
5
Обратная совместимость
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
8
Версия 2.1
9
Отличительные особенности 2.1:
• Отказ от поддержки устаревших
браузеров (особенно от IE 6 и 7)
• Частичное изменение пр...
10
Пример http://example...
11
Контролы в 2.0
Пример http://bit.ly/1q8lO6O
12
Контролы в 2.1
Пример http://bit.ly/1qcVV7N
13
Пример http://bit.ly/1fXXiAG
14
Три состояния размера контролов
Large
Medium
Small
15
Пример http://bit.ly/1fXXiAG
16
Пример http://bit.ly/1fXXiAG
17
Пример http://bit.ly/1fXXiAG
18
19
Опция size контролов
button.options.set(‘size’, ‘small’);
// значение по умолчанию “auto”
20
Своя кнопка в 2.1
Large
Medium
Small
Пример http://jsfiddle.net/6Zv3X/1/
21
Своя кнопка в 2.1
new ymaps.control.Button({
data: {
content: 'Моя кнопка',
image: 'http://site/img.button.svg'
}
});
П...
22
2.0 2.1
23
Другие изменения в
контролах
24
Позиционирование контролов в 2.0
50px
50px
25
Абсолютное позиционирование в 2.0
map.controls.add(button1,
{top: 50, left: 50});
map.controls.add(button2,
{top: 50, l...
26
var group = new ymaps.control.Group({
items: [ button1, button2, button3 ]
});
Плавающее позиционирование в 2.0
27
Позиционирование контролов в 2.1
map.controls.add(button3, {float: 'right', floatIndex: 1});
map.controls.add(button4, ...
28
Элемент управления «Fullscreen»
Пример http://bit.ly/1eiVG3J
29
Элемент управления «Fullscreen»
Пример http://bit.ly/1eiVG3J
30
Наборы контролов
31
var map = new ymaps.Map('map', {
center:
[53.90473, 27.551899],
zoom: 10
});
map.controls
.add('zoomControl')
.add('typ...
32
Набор контролов для большой карты
map.controls.add(‘largeMapDefaultSet’);
33
Набор контролов для средней карты
map.controls.add(‘mediumMapDefaultSet’);
34
Набор контролов для маленькой карты
map.controls.add(‘smallMapDefaultSet’);
35
Балун
36
Балун в 2.1
Пример http://bit.ly/1so6Ygt
37
Балун в маленькой карте (2.0)
38
Балун в маленькой карте (2.1)
Пример http://bit.ly/1so6Ygt
39
Создание балуна геообъекта
var placemark = new ymaps.Placemark(
map.getCenter(), {
balloonContentBody: ‘Информация в ба...
40
Новые метки
41
Метки в 2.0
Пример http://bit.ly/1jlcrQa
42
SVG Метки 2.1
• Меньший объем загружаемых
данных
• Хорошо отображаются на retina
дисплеях
• Новые возможности для
разра...
43
Метки на Retina дисплеях
x1
x1
x5
x5
44
Стандартные макеты меток в 2.1
45
Стандартный макет метки в 2.1
new ymaps.Placemark(
geoPosition, {}, {
iconColor: '#5f3fcd'
}
);
Пример http://bit.ly/1e...
46
Новый язык
шаблонов макетов
47
Создание своего HTML-макета
var layout =
ymaps.templateLayoutFactory.createClass(
'<div class=customButton>123</div>'
);
48
Пример создания своей HTML метки
layout =
ym.templateLayoutFactory.createClass(
'<div class=placemark></div>'
),
placem...
49
Новый язык шаблонов макетов
[if !data.message]
Нет ни одной записи
[else]
$[[data.message]]
$[data.sublayout]
[endif]
{...
50
Итерация в шаблоне макета
var balloonLayout =
ymaps.templateLayoutFactory.createClass(
'<ul>' +
'{% for listItem in pro...
51
Подключение API
52
Пакеты в версии 2.0
<script src="http://api-maps.yandex.ru/2.0/?load=package.map,
package.controls&lang=ru-RU" type="te...
53
Подключение API 2.0
<script src="http://api-
maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
type="text/javascript"><...
54
Подключение API 2.1
<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU"
type="text/javascript"></script>
packag...
55
Сокращение размера package.full
332
190
0 50 100 150 200 250 300 350
Версия 2.0
Версия 2.1
Размер package.full (кб)
56
Дозагрузка компонентов
57
Подключение API 2.1
Placemark
Clusterer
Map
<script src="http://api-maps.yandex.ru/2.1-
dev/?load=Map,Placemark,Cluster...
58
Интерфейс
асинхронных
операций
59
Асинхронный интерфейс в 2.0
myMap.setBounds([[60,-40], [20,60]], {
checkZoomRange: true,
callback: function(err) {
if (...
60
Асинхронный интерфейс в 2.0
var promise = ymaps.route([ 'Королев', 'Химки']);
promise.then(
function (route) {
map.geoO...
61
Объект-обещание (Promise)
Source
Listener 1
Listener 2
Listener 3
Promise
62
Интерфейс Promise
promise.fulfill(value); // resolve
promise.reject(error);
promise.then(
function onFulfill (value) { ...
63
Асинхронный интерфейс в 2.1
• Vow;
o https://github.com/dfilatov/vow
• Реализует Promises/A+;
o http://dom.spec.whatwg....
64
Основные особенности Vow
• Асинхронное получение значения;
• Deferred object.
65
Асинхронное получение значения
var promise = load(..);
promise.then(
function (route) {
console.log('2');
}
);
console....
66
Синхронный Promise в jQuery
function animate(duration) {
$('div').animate({opacite: 0}, duration).promise()
.then(funct...
67
Объект-обещание (Promise)
Source
Listener 1
Listener 2
Listener 3
Promise
68
Deferred Object
Source
Listener 1
Listener 2
Listener 3
Promise
Deferred
Object
69
Методы Vow
Promise API
• fulfill
• reject
• notify
• isFulfilled
• isRejected
• isResolved
• valueOf
• then
• fail
• al...
70
Использование API
на мобильных
устройствах
71
Маппинг событий
Touch Events
Pointer Events
mousedown
mouseup
mousemove
click
dbclick
…
touchstart
touchend
touchmove
…...
72
geoObject.events
.add(‘click’, callback);
map.events
.add(‘mouseenter’, callback);
73
События multitouch*
Для обработки множественных
прикосновений
• multitouchstart
• multitouchmove
• multitouchend
74
Мультитач поведение
75
ymaps.domEvent.manager
.add(
htmlElement,
[‘click’, ‘mouseenter’],
callback
);
Пример http://bit.ly/1eq14lT
76
ymaps.domEvent.manager
.add(
htmlElement,
'multitouchstart',
function (event) {
// ...
event.callMethod('preventDefault...
77
Гибридные устройства
78
Тайлы для устройств с повышенной плотностью
пикселей
devicePixelRatio = 1
devicePixelRatio = 2
79
<meta name="viewport"
content="width=device-width" />
80
Использование API в PhoneGap
• Нельзя создавать локальную копию API
Яндекс.Карт
• Нужно передавать HTTP заголовок Refer...
81
82
Ссылки
Официальная группа в Facebook
https://www.facebook.com/ymapsapi
Официальная группа в ВК
http://vk.com/ymapsapi
К...
83
Спасибо за внимание!
84
Всеволод Шмыров
Разработчик интерфейсов
vsesh@yandex-team.ru
https://www.facebook.com/vsevolod.shmyrov
http://vsevolod-...
Upcoming SlideShare
Loading in …5
×

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

3,964 views

Published on

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

Published in: Technology
  • Be the first to comment

Использование 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/

×