Upload
elena-voynova
View
219
Download
0
Embed Size (px)
DESCRIPTION
API Яндекс.Карт для мобильной разработки
Citation preview
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
Всеволод Шмыров
Разработчик интерфейсов
https://www.facebook.com/vsevolod.shmyrov
http://vsevolod-shmyirov.moikrug.ru/