Всеволод Шмыров, Яндекс

1

2

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

Всеволод Шмыров

3

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

4

5

6

7

«Мобильность» - Октябрь 2013

29%29%https://clck.ru/9M7Wg

8

«Мобильность» - Октябрь 2014

36%36%https://clck.ru/9M7Wn

9

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

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

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

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

11

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

12

2.0 – май 20122.1 – апрель 2014

13

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

14

15

Touch Events Pointer Events

Webkit, Blink, Gecko Mobile Trident >= 6.0

Простой Абстрактный

16

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

2. Переложить ответственность на разработчиков

17

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

click

18

click

19

Задержка~300mc

20

21

mousedownmouseupclickdblclickcontextmenu...

22

Передать ответственность

document.addEventListener("mousedown", this._onMouseDown);

document.addEventListener("touchstart", this._onTouchStart);

document.addEventListener("pointerdown", this._onPointerDown);

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

TouchEvents

PointerEvents

mousedownmouseupmousemoveclickdbclick…

touchstarttouchendtouchmove…

pointerdownpointeruppointermove…

25

touchstart ||pointerdown

mouseenter, mousedown

hold &&(touchstart ||pointerdown)

contextmenu

26https://clck.ru/9LoRk

click mousemove

contextmenu mouseup

dblclick wheel

mousedown multitouchstart

mouseenter multitouchmove

mouseleave multitouchend

27

28

29https://clck.ru/9LoSR

ymaps.domEvent.manager

.add(

htmlElement,

'multitouchstart',

function (event) {

// ...

}

);

30

Экран

31

1. Маленький физический размер экрана

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

32

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

33

Large

Medium

Small

34

Large

Medium

Small

35https://clck.ru/9LoX6

36https://clck.ru/9LoX6

37https://clck.ru/9LoX6

38https://clck.ru/9LoX6

39

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

40

41https://clck.ru/9M7UE

42

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

43

window.devicePixelRatio

44

1. Увеличение размера изображений

2. Использование векторной графики

45

x1

x1

x5

x5

46

devicePixelRatio = 1 devicePixelRatio = 2

256 px 512 px

47

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

48

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

JS

CSS

Страница

49

50

Мета “viewport”

51

52

53

<meta name="viewport" content="width=device-width, initial-

scale=1.0, maximum-scale=1.0, user-scalable=no"/>

54

55

56

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

57

Минимум лишних обращений к сети

var myGeocoder = ymaps.geocode("Минск");

myGeocoder.then(function (res) {map.geoObjects.add(res.geoObjects);

});

58

<script src=//api-maps.yandex.ru/2.1/?lang=ru-RU type="text/javascript">

</script>

https://clck.ru/9Lq7W

Загрузка стандартного пакета

59

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

Map

GeoObjectHint

Balloon

…

…

…

geoQuery

Button

Layer

Layout

……

…

…

60

//api-maps.yandex.ru/2.1/?load=Map,GeoObject&lang=ru-RU

Map,GeoObject

https://clck.ru/9Lq7W

61

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

62

Загрузка по требованию

var modules = ['Placemark', 'overlay.Placemark'];

ymaps.modules.require(modules).spread(function (Placemark, PlacemarkOverlay)

{// ..

});

63

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

64

Геолокация

65

geolocation

https://clck.ru/9M8iu

ymaps.geolocation.get({// provider: ‘yandex’, // or ‘browser’

}).then(function (result) {// …

});

66https://clck.ru/9M8jg

67

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

68

WebView

69

<WebView android:id="@+id/webview"></WebView>

// …

WebView myWebView = (WebView) findViewById(R.id.webview);

myWebView.loadUrl("http://ya.ru");

70

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

во WebView?

71

Да

72

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

73

Нельзя создавать локальную копию API

https://clck.ru/9LkmH

74

75

Кеширование во WebView

webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE

);

76

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

77

78

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

79

Нужно обязательно указывать HTTP

заголовок «Referer»

https://clck.ru/9LkmH

80https://clck.ru/9LkmH

http://store_appid.ymapapp

81

myWebView.loadDataWithBaseURL(

"http://ru.yandex.api.mapsample.ymapapp",

assetHTMLText,

"text/html",

"UTF-8",

null

);

82

1.Нельзя создавать локальную копию API

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

3.Нужно обязательно указывать HTTP заголовок «Referer»

83

Пример проектаAndroid Studio

https://yadi.sk/d/B-VbFPktcUoXM

84

Официальная группа в Facebook

https://www.facebook.com/ymapsapi

Клуб разработчиков API Яндекс.Карт

http://clubs.ya.ru/mapsapi/

Документация версии 2.1

https://clck.ru/9Lkek

85

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

86

Всеволод Шмыров

Разработчик интерфейсов

vsesh@yandex-team.ru

https://www.facebook.com/vsevolod.shmyrov

http://vsevolod-shmyirov.moikrug.ru/