幻灯片 1

Size: px

Start display at page:

Download "幻灯片 1"

主费
5 years ago
Views:

1 Delivering accurate maps to Chinese Android users 为中国安卓用户提供准确的地图服务

2 Work at Mapbox includes: Android apps, demos, starter kits, documentation, support, syncing Android team with other departments, etc. 工作包括 : 安卓 app 演示初学者工具包客户服务等 Lived in Beijing from 到 2015, 我住在北京!

3 Today s talk: 简报主题 :

4 Today s talk: 简报主题 : 1. Design 地图设计决策

5 Today s talk: 简报主题 : 1. Design 地图设计决策 1. Location data 位置数据服务

6 Today s talk: 简报主题 : 1. Design 地图设计决策 1. Location data 位置数据服务 1. How to create an app with Mapbox 通过 Mapbox, 怎么开发一个安卓应用?

7 Design decisions 地图设计决策

8 Does the map have too much information? Too little? Wrong type of information? 太多信息? 太少?

9 Correct zoom level for a hotel? 酒店的位置 : 正确的缩放级别?

10 Right layers and information? Correct UI/UX? 你要给用户什么选择?

11 App user has 13 choices including the map. Right amount of options? Right type? 应用用户有十三个选择适量选择吗? 说不定...

12 App user has 16 choices including the map(!) 十六个选择 (!)

13 Right info displayed for a bicyclist? 骑自行车的人需要看什么信息?

14 What's important here? Schools? Hotel prices? Subway stations? 什么是重要的? 大学的位置? 酒店的价格? 每一个地铁站?

15 Don t show subway lines if in driving mode? Buildings 如果开车的话, 不用看地铁线? 不用看每一个大楼?

16 Marker clustering 标记群集

17 Static image decision (markers, camera position, etc.) 静止的地图决策 ( 标记视角位置等 )

18 What s the difference? 有什么区别?

19 Navigation 导航 >

20 Daily life 日常生活 >

22 Asking for permissions 位置权限

24 Location data + context 位置数据服务

26 导航

27 位置搜索 ( 地理编码 )

28 智能手表

29 AR( 增强现实 ) 游戏

30 物流

31 社交媒体

33 Location data platform for developers 开发者而建的地图平台

34 Location data platform for developers 开发者而建的地图平台 Maps 地图

35 Vector tiles + video game technology (OpenGL) 矢量瓦片 + 动画游戏技术

36 Location data platform for developers 开发者而建的地图平台 Maps 地图 Location search 位置搜索 ( 地理编码 )

37 Location data platform for developers 开发者而建的地图平台 Maps 地图 Location search 位置搜索 ( 地理编码 ) Navigation (driving, walking, biking) 导航 ( 开车走路骑车 )

38 Open-source tools (700 public Github repos) 开源的安卓产品

39 SDKs for Android, ios, Unity, Qt (for cars), & React Native 软件开发包 : 安卓苹果公司 Unity Qt ( 一种汽车平台 ) & React Native.

40 Extrusions 三维外形

41 Dancing buildings 三维外形 + 麦克风

42 AR(Core) 增强现实

43 AR(Core) 增强现实

44 In-app nav 应用里导航

45 Offline 离线下载

46 Heatmaps 热点地图

47 Let s build! 咱们开始!

48 Set up basic project

49 App-level build.gradle file dependencies {... { transitive = true}... }

50 App-level build.gradle file dependencies {... { transitive = true}... }

51 Maps SDK size 软件开发包大小 Less than 1MB 可能小于 1MB SDKs final impact is dependent on other app decisions

52 strings.xml file 字符串的文件 Add your key to the strings file 加你 Mapbox 的访问令牌 <resources>... <string name="access_token">mapbox_access_token</string>... </resources> Your first 50,000 mobile users are free! 你前面五万的移动用户是免费的!

53 XML layout file XML 布局文件 <RelativeLayout xmlns:android=" xmlns:mapbox=" android:layout_width="match_parent" android:layout_height="match_parent"> <com.mapbox.mapboxsdk.maps.mapview android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>

54 More XML attributes 更多 XML 属性 github.com/mapbox/mapbox-glnative/blob/master/platform/android/mapboxglandroidsdk/src/main/res/value s/attrs.xml Additional map XML attributes 更多 XML 属性 <com.mapbox.mapboxsdk.maps.mapview android:layout_width="match_parent" android:layout_height="match_parent" mapbox:mapbox_cameratargetlat=" " mapbox:mapbox_cameratargetlng=" " mapbox:mapbox_camerazoom=" " mapbox:mapbox_cameratilt="50"

55 Activity file Activity 文件 public class MainActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); Mapbox.getInstance(this, getstring(r.string.access_token)); } setcontentview(r.layout.activity_main);

56 public class MainActivity extends AppCompatActivity { private MapView protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); Mapbox.getInstance(this, getstring(r.string.access_token)); setcontentview(r.layout.activity_main); mapview = (MapView) findviewbyid(r.id.runtime_mapview); mapview.oncreate(savedinstancestate); mapview.getmapasync(new OnMapReadyCallback() public void onmapready(final MapboxMap mapboxmap) { // Customize map with markers, polylines, etc. } } });

57 Method overrides public void onresume() { super.onresume(); mapview.onresume(); protected void onstart() { super.onstart(); mapview.onstart(); protected void onstop() { super.onstop(); mapview.onstop(); public void onpause() { super.onpause(); mapview.onpause(); public void onlowmemory() { super.onlowmemory(); mapview.onlowmemory(); protected void ondestroy() { super.ondestroy(); mapview.ondestroy(); protected void onsaveinstancestate(bundle outstate) { super.onsaveinstancestate(outstate); mapview.onsaveinstancestate(outstate); }

58 The result! 结果!

59 Run-time styling 运行时地图模式

61 mapview.oncreate(savedinstancestate); mapview.getmapasync(new OnMapReadyCallback() public void onmapready(final MapboxMap mapboxmap) { final Layer waterlayer = mapboxmap.getlayer("water"); } });

62 mapview.oncreate(savedinstancestate); mapview.getmapasync(new OnMapReadyCallback() public void onmapready(final MapboxMap mapboxmap) { final Layer waterlayer = mapboxmap.getlayer("water"); } findviewbyid(r.id.floatingactionbutton).setonclicklistener(new View.OnClickListener() public void onclick(view v) { if (waterlayer!= null) { waterlayer.setproperties(propertyfactory.fillcolor(color.parsecolor("#023689"))); } } });

63 mapview.oncreate(savedinstancestate); mapview.getmapasync(new OnMapReadyCallback() public void onmapready(final MapboxMap mapboxmap) { final Layer waterlayer = mapboxmap.getlayer("water"); } findviewbyid(r.id.floatingactionbutton).setonclicklistener(new View.OnClickListener() public void onclick(view v) { if (waterlayer!= null) { waterlayer.setproperties(propertyfactory.fillcolor(color.parsecolor("#023689"))); } } });

64 findviewbyid(r.id.floatingactionbutton).setonclicklistener(new View.OnClickListener() public void onclick(view v) { if (waterlayer!= null) { waterlayer.setproperties(propertyfactory.fillcolor(color.parsecolor("#023689"))); } }); for (Layer singlemaplayer : mapboxmap.getlayers()) { if (singlemaplayer.getid().contains("marine")) { singlemaplayer.setproperties( PropertyFactory.textHaloBlur(10f), PropertyFactory.textSize(25f), PropertyFactory.textColor(Color.parseColor("#00FF08")), PropertyFactory.textOpacity(1f)); } } }

65 findviewbyid(r.id.floatingactionbutton).setonclicklistener(new View.OnClickListener() public void onclick(view v) { if (waterlayer!= null) { waterlayer.setproperties(propertyfactory.fillcolor(color.parsecolor("#023689"))); } for (Layer singlemaplayer : mapboxmap.getlayers()) { if (singlemaplayer.getid().contains("marine")) { }); singlemaplayer.setproperties( PropertyFactory.textHaloBlur(10f), PropertyFactory.textSize(25f), PropertyFactory.textColor(Color.parseColor("#00FF08")), PropertyFactory.textOpacity(1f)); } } }

66 Retrieving a single map style s layer names mapview.oncreate(savedinstancestate); mapview.getmapasync(new OnMapReadyCallback() public void onmapready(final MapboxMap mapboxmap) { for (Layer singlemaplayer : mapboxmap.getlayers()) { } Log.d("MainActivity", "onmapready: layer name = "+ singlemaplayer.getid()); } });

67 Data-driven styling

68 Some current customers 现有的客户

69 Want to learn more? 你想了解更多吗?

70 Android documentation 技术资料 mapbox.com/android-docs 中文资料 : mapbox.cn/help/first-steps-android-sdk/ & mapbox.cn/android-sdk

71 Blog 博客 blog.mapbox.com 微信公众号 :Mapbox

72 Location + context 最后, 位置数据服务是最重要的

主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片狗狗名字狗狗生日 // 狗狗圖片 int[] pic =new

ListView 自訂排版主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片狗狗名字狗狗生日 // 狗狗圖片 int[] pic =new int[]{r.drawable.dog1, R.drawable.dog2,