API Яндекс.Карт для мобильной разработки

1. 1

2. 2
API Яндекс.Карт для
мобильной разработки
Всеволод Шмыров

3. 3
API Яндекс.Карт

4. 4

5. 5

6. 6

7. 7
«Мобильность» - Октябрь 2013
2299%%
https://clck.ru/9M7Wg

8. 8
«Мобильность» - Октябрь 2014
3366%%
https://clck.ru/9M7Wn

9. 9
1. Как API Яндекс.Карт
поддерживает мобильные
устройства?
2. Рекомендации использования
API на мобильных устройствах
3. Использование API во
WebView

10. Интересная ссылка 10

11. 11
Как API поддерживает
мобильные устройства?

12. 12
2.0 – май 2012
2.1 – апрель 2014

13. 13
Сенсорный ввод

14. 14

15. 15
Touch Events Pointer Events
Webkit, Blink,
Gecko Mobile Trident >= 6.0
Простой Абстрактный

16. 16
1. Ничего не делать
2. Переложить
ответственность на
разработчиков

17. 17
Ничего не делать
click

18. 18
click

19. 19
Задержка
~300mc

20. 20

21. 21
mousedown
mouseup
click
dblclick
contextmenu
...

22. Передать ответственность
document.addEventListener(
"mousedown", this._onMouseDown);
document.addEventListener(
"touchstart", this._onTouchStart);
document.addEventListener(
"pointerdown", this._onPointerDown);
22

23. 23
document.addEventListener(
"mousedown", this._onMouseDown);
document.addEventListener(
"touchstart", this._onTouchStart);
document.addEventListener(
"pointerdown", this._onPointerDown);
if (ifIE10)
document.addEventListener(
"MSPointerDown", this._onPointerDown);
if (ifIE8)
document.attachEvent(
"onmousedown", this._onMouseDown);

24. 24
Touch
Events
Pointer
Events
mousedown
mouseup
mousemove
click
dbclick
…
touchstart
touchend
touchmove
…
pointerdown
pointerup
pointermove
…

25. 25
touchstart ||
pointerdown
mouseenter,
mousedown
hold &&
(touchstart ||
pointerdown)
contextmenu

26. click mousemove
contextmenu mouseup
dblclick wheel
mousedown multitouchstart
mouseenter multitouchmove
mouseleave multitouchend
https://clck.ru/9LoRk 26

27. 27

28. 28

29. ymaps.domEvent.manager
.add(
htmlElement,
'multitouchstart',
function (event) {
// ...
}
);
https://clck.ru/9LoSR 29

30. 30
Экран

31. 31
1. Маленький физический
размер экрана
2. Высокая плотность
пикселей

32. 32
Адаптивный дизайн

33. 33
Large
Medium
Small

34. 34
Large
Medium
Small

35. https://clck.ru/9LoX6 35

36. https://clck.ru/9LoX6 36

37. https://clck.ru/9LoX6 37

38. https://clck.ru/9LoX6 38

39. 39
Балун (подсказка)

40. 40

41. https://clck.ru/9M7UE 41

42. 42
Высокая плотность
пикселей

43. 43
window.devicePixelRatio

44. 44
1. Увеличение размера
изображений
2. Использование векторной
графики

45. 45
x1
x1
x5
x5

46. 46
devicePixelRatio = 1 devicePixelRatio = 2
256 px 512 px

47. 47
Рекомендации
использования API на
мобильных устройствах

48. 48
API
HTML Яндекс.Карт
JS
CSS
Страница

49. 49

50. 50
Мета “viewport”

51. 51

52. 52

53. 53
<meta name="viewport"
content="width=device-width, initial-scale=
1.0, maximum-scale=1.0, user-scalable=
no"/>

54. 54

55. 55

56. 56
Лишние соединения

57. 57
Минимум лишних обращений к сети
var myGeocoder = ymaps.geocode("Минск");
myGeocoder.then(function (res) {
map.geoObjects.add(res.geoObjects);
});

58. 58
Загрузка стандартного пакета
<script
src=//api-maps.yandex.ru/2.1/?lang=ru-RU
type="text/javascript">
</script>
https://clck.ru/9Lq7W

59. 59
API Яндекс.Карт
Map
GeoObject
Balloon
Hint
…
…
…
geoQuery
Button
Layer
Layout
…
…
…
…

60. 60
Map,GeoObject
//api-maps.yandex.ru/2.1/?
load=Map,GeoObject&lang=ru-RU
https://clck.ru/9Lq7W

61. 61
Размер API в Кб режим “release”

62. 62
Загрузка по требованию
var modules = ['Placemark', 'overlay.Placemark'];
ymaps.modules.require(modules)
.spread(function (Placemark, PlacemarkOverlay)
{
// ..
});

63. 63
Дозагрузка компонентов

64. 64
Геолокация

65. ymaps.geolocation.get({
// provider: ‘yandex’, // or ‘browser’
}).then(function (result) {
// …
});
65
geolocation
https://clck.ru/9M8iu

66. https://clck.ru/9M8jg 66

67. 67
Использование API во
WebView

68. 68
WebView

69. 69
<WebView
android:id="@+id/webview"></WebView>
// …
WebView myWebView =
(WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://ya.ru");

70. Можно ли использовать
70
API Яндекс.Карт
во WebView?

71. 71
Да

72. 72
… но есть несколько
особенностей

73. 73
Нельзя создавать
локальную копию API
https://clck.ru/9LkmH

74. 74

75. 75
Кеширование во WebView
webSettings.setCacheMode(
WebSettings.LOAD_NO_CACHE
);

76. 76
Необходим интернет

77. 77

78. 78
<manifest ... >
<uses-permission
android:name="android.permission.INTERNET" />
...
</manifest>

79. 79
Нужно обязательно
указывать HTTP
заголовок «Referer»
https://clck.ru/9LkmH

80. http://store_appid.ymapapp
https://clck.ru/9LkmH 80

81. myWebView.loadDataWithBaseURL(
"http://ru.yandex.api.mapsample.ymapapp",
assetHTMLText,
"text/html",
"UTF-8",
null
);
81

82. 82
1.Нельзя создавать локальную
копию API
2.Необходим интернет
3.Нужно обязательно
указывать HTTP заголовок
«Referer»

83. 83
Пример проекта
Android Studio
https://yadi.sk/d/B-VbFPktcUoXM

84. 84
Официальная группа в Facebook
https://www.facebook.com/ymapsapi
Клуб разработчиков API Яндекс.Карт
http://clubs.ya.ru/mapsapi/
Документация версии 2.1
https://clck.ru/9Lkek

85. 85
Спасибо за внимание!

86. 86
Всеволод Шмыров
Разработчик интерфейсов
https://www.facebook.com/vsevolod.shmyrov
http://vsevolod-shmyirov.moikrug.ru/
vsesh@yandex-team.ru