More Related Content Similar to Android基礎課程2 - google map android API (10) More from Duran Hsieh (20) Android基礎課程2 - google map android API2. OUTLINE
• 課程目標與進度
• Google map API key
• Google map API 介紹與使用
• Google map API 事件與
FrameLayout
• Google map API UI
• Google map API 繪製線
• 目前問題彙整
• 實作:Google map 與GPS感測
器互動
• Q&A
3. 3Presented By: Duran Hsieh
課程目標與進度
• 課程目標
• Android 基礎知識
• 名詞解釋
• 運作原理、生命週期
• Android Studio 介紹與操作
• Android App 開發實作
• Android 專案架構說明、Java 學習
• Layout、Components 介紹、操作與程式實作
• 地圖互動程式製作
• Material design
• 上架教學
• 如何將你的 App 上架
• 廣告
4. 4Presented By: Duran Hsieh
課程目標與進度
•課程進度
日期 說明
04月06日 Android 基礎知識與安裝環境
Android上使用GPS感測器
作業:GPS 範例程式
04月13日 期中考放假
04月20日 Android Google map API
作業:建立地圖範例程式
04月27日 Material Design、地圖互動程式製作、產生APK與APP上架
作業:準備小專題
05月18日 小專題成果驗收 - DEMO
6. 6Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 方法1.
• 前往 https://console.developers.google.com/,並登入帳戶
22. 22Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 常用語法
• 經緯度(LatLng)
• 標記(MarkerOptions)
• 加入地圖
new MarkerOptions()
.position(latlng)
.title("標題")
.snippet("描述")
.draggable(true);
LatLng latlng = new LatLng(-34, 151);
mMap.addMarker(new MarkerOptions().position(latlng));
23. 23Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 更多標記(MarkerOptions)
MarkerOptions()
.icon(BitmapDescriptorFactory.fromResource(R.drawable.common_full_open_on_phone))
.anchor(0.0f, 1.0f)
.position(new LatLng(41.889, -87.622));
24. 24Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 移動位置
• 縮放
mMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom( new LatLng(-34, 151),13));
25. 25Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 地圖類型
• GoogleMap.MAP_TYPE_SATELLITE
• GoogleMap.MAP_TYPE_NONE
• GoogleMap.MAP_TYPE_NORMAL
• GoogleMap.MAP_TYPE_HYBRID
• GoogleMap.MAP_TYPE_TERRAIN
• 設定地圖類型
mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
26. 26Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 開始撰寫第一個 map activity
• 加入套件 (com.google.android.gms:play-services-maps)
• 加入google map api key
• 加入 fragment (XML)
• 加入程式
28. 28Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• app - > dependencies
• 找到 com.google.android.gms:play-services-maps:10.2.1
29. 29Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 方法2:
• build.gradle - > dependencies
• 於dependencies 內加上 com.google.android.gms:play-
services-maps:10.2.1
32. 32Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 加入程式碼
• Private Googlemap mMap;
• OnCreate
33. 33Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• implement OnMapReadyCallback 與 onMapReady 方法
34. 34Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• implement OnMapReadyCallback 與 onMapReady 方法
36. 36Presented By: Duran Hsieh
GOOGLE MAP API 事件
• 事件:
• Click
• Imlpement OnMapReadyCallback 並加入 onMapReady 方法
• implement OnMapClickListener 並加入onMapClick 方法
• onMapReady 方法內加入 mMap.setOnMapClickListener(this)
• onMapClick 方法內加入 想做的事情
37. 37Presented By: Duran Hsieh
GOOGLE MAP API 事件
• Long Click
• Imlpement OnMapReadyCallback 並加入 onMapReady 方法
• implement OnMapLongClickListener並加入 onMapLongClick方法
• onMapReady 方法內加入mMap.setOnMapLongClickListener(this)
• onMapLongClick方法內加入 想做的事情
38. 38Presented By: Duran Hsieh
GOOGLE MAP API 事件
• Camera move
• Imlpement OnMapReadyCallback 並加入 onMapReady 方法
• implement OnCameraIdleListener並加入onCameraIdle 方法
• onMapReady 方法內加入mMap.setOnCameraIdleListener(this);
• onCameraIdle方法內加入 想做的事情
40. 40Presented By: Duran Hsieh
實作:地圖事件程式
• 建立一個地圖事件程式
• 包含點擊、長按與地圖滑動事件
• 點擊與長按回傳顯示經緯度,並顯示
• “點擊”
• “長按”
• 地圖滑動時顯示中文“地圖移動中”
• 使用framelayout
42. 42Presented By: Duran Hsieh
GOOGLE MAP API UI
mUiSettings = mMap.getUiSettings();
mUiSettings.setZoomControlsEnabled(true);
mUiSettings.setCompassEnabled(true);
mUiSettings.setMyLocationButtonEnabled(true);
mMap.setMyLocationEnabled(true);
mUiSettings.setScrollGesturesEnabled(true);
mUiSettings.setZoomGesturesEnabled(true);
mUiSettings.setTiltGesturesEnabled(true);
mUiSettings.setRotateGesturesEnabled(true);
取得UI設定
縮放按鈕
指南針按鈕
我的位置與按鈕
滑動手勢
縮放手勢
傾斜手勢
旋轉(變換方向)手勢
43. 43Presented By: Duran Hsieh
GOOGLE MAP API UI
• UI:
• 建立一個簡單的地圖,包含上述UI
• https://github.com/matsurigoto/AndroidGoogleMapUISett
ingExample.git
45. 45Presented By: Duran Hsieh
GOOGLE MAP API 繪製線
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
LatLng taiwan = new LatLng(23.97, 120.98);
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(taiwan, 8));
mMutablePolyline = mMap.addPolyline(new PolylineOptions()
.add(A, B, C, D)
.width(5)
.color(Color.BLUE)
.clickable(true));
mMap.setOnPolylineClickListener(new GoogleMap.OnPolylineClickListener() {
@Override
public void onPolylineClick(Polyline polyline) {
polyline.setColor(polyline.getColor() ^ 0x00ffffff);
}
});
}
Step 1. 加入屬性(點、線寬、顏色、點擊)
Step 1. 加入點擊事件
46. 46Presented By: Duran Hsieh
GOOGLE MAP API 繪製線
• AndroidGoogleMapPolylineExample:
• https://github.com/matsurigoto/AndroidGoogleMapPolyli
neExample.git
49. 49Presented By: Duran Hsieh
目前問題彙整
• 如何找 DEBUG ?
Step 1.
Set Break point
Step 2.Debug Step 3.Next Step
50. 50Presented By: Duran Hsieh
目前問題彙整
• 問題一 Error:Tag <uses-permission> attribute name
has invalid character ' '.
51. 51Presented By: Duran Hsieh
目前問題彙整
• 問題二 Attempt to invoke virtual method ‘android.view.Window$Callback
android.view.Window.getCallback()' on a null object reference
54. 54Presented By: Duran Hsieh
實作:GOOGLE MAP 與 GPS感測器
• 建立一個隨著使用者移動的地圖
• GPS感測器 (上週教學)
• Google map 上顯示自己目前位置(marker)
• 衛星地圖
• 地圖隨著使用者移動
• Marker隨著使用者移動
Editor's Notes 1. Net core rc4 版本,dotnet new 指令有重大變更。
1. Net core rc4 版本,dotnet new 指令有重大變更。
參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android 參考資料:https://zh.wikipedia.org/wiki/Android <fragment xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".MapsActivity" android:name="com.google.android.gms.maps.SupportMapFragment" /> SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map);mapFragment.getMapAsync(this); public void onMapReady(GoogleMap googleMap) { mMap = googleMap; // Add a marker in Sydney and move the camera LatLng sydney = new LatLng(-34, 151); mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney")); mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));} Google map 官方有提供範例可以參考https://github.com/googlemaps/android-samples Note: Insert your picture by clicking on the Picture Place Holder Icon, then send it back! http://stackoverflow.com/questions/36666091/attempt-to-invoke-virtual-method-android-view-windowcallback-android-view-wind Note: Insert your picture by clicking on the Picture Place Holder Icon, then send it back!