ANDROID
基礎開發課程 (2)
Presented by
Duran Hsieh
http://dog0416.blogspot.tw/

OUTLINE
• 課程目標與進度
• Google map API key
• Google map API 介紹與使用
• Google map API 事件與
FrameLayout
• Google map API UI
• Google map API 繪製線
• 目前問題彙整
• 實作：Google map 與GPS感測
器互動
• Q&A

3Presented By: Duran Hsieh
課程目標與進度
• 課程目標
• Android 基礎知識
• 名詞解釋
• 運作原理、生命週期
• Android Studio 介紹與操作
• Android App 開發實作
• Android 專案架構說明、Java 學習
• Layout、Components 介紹、操作與程式實作
• 地圖互動程式製作
• Material design
• 上架教學
• 如何將你的 App 上架
• 廣告

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

GOOGLE MAP API KEY

6Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 方法1.
• 前往 https://console.developers.google.com/，並登入帳戶

7Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 建立新專案

8Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 建立API Key

9Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 取得API Key
???

10Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 新增 API 限制

11Presented By: Duran Hsieh
GOOGLE MAP API KEY

12Presented By: Duran Hsieh
GOOGLE MAP API KEY

13Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 放置您的google map api key

14Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 方法2.
• 建立一個新的google map activity

15Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 找到google_maps_api.xml 並閱讀說明

16Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 貼上網址，開始註冊API Key

17Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 建立 api key

18Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 建立完成

19Presented By: Duran Hsieh
GOOGLE MAP API KEY
• API key建立完成，也給有了限制

20Presented By: Duran Hsieh
GOOGLE MAP API KEY
• 填上API key

ANDROID
GOOGLE MAP API
介紹與使用

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));

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));

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));

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);

26Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 開始撰寫第一個 map activity
• 加入套件 (com.google.android.gms:play-services-maps)
• 加入google map api key
• 加入 fragment (XML)
• 加入程式

27Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 加入套件
• 方法1：file -> project structure

28Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• app - > dependencies
• 找到 com.google.android.gms:play-services-maps:10.2.1

29Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 方法2：
• build.gradle - > dependencies
• 於dependencies 內加上 com.google.android.gms:play-
services-maps:10.2.1

30Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 加入 google map api key

31Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 加入 fragment (XML)

32Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• 加入程式碼
• Private Googlemap mMap;
• OnCreate

33Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• implement OnMapReadyCallback 與 onMapReady 方法

34Presented By: Duran Hsieh
ANDROID GOOGLE MAP API 介紹與使用
• implement OnMapReadyCallback 與 onMapReady 方法

Google map API 事件
與 FrameLayout

36Presented By: Duran Hsieh
GOOGLE MAP API 事件
• 事件：
• Click
• Imlpement OnMapReadyCallback 並加入 onMapReady 方法
• implement OnMapClickListener 並加入onMapClick 方法
• onMapReady 方法內加入 mMap.setOnMapClickListener(this)
• onMapClick 方法內加入 想做的事情

37Presented By: Duran Hsieh
GOOGLE MAP API 事件
• Long Click
• Imlpement OnMapReadyCallback 並加入 onMapReady 方法
• implement OnMapLongClickListener並加入 onMapLongClick方法
• onMapReady 方法內加入mMap.setOnMapLongClickListener(this)
• onMapLongClick方法內加入 想做的事情

38Presented By: Duran Hsieh
GOOGLE MAP API 事件
• Camera move
• Imlpement OnMapReadyCallback 並加入 onMapReady 方法
• implement OnCameraIdleListener並加入onCameraIdle 方法
• onMapReady 方法內加入mMap.setOnCameraIdleListener(this);
• onCameraIdle方法內加入 想做的事情

39Presented By: Duran Hsieh
FRAMELAYOUT

40Presented By: Duran Hsieh
實作：地圖事件程式
• 建立一個地圖事件程式
• 包含點擊、長按與地圖滑動事件
• 點擊與長按回傳顯示經緯度，並顯示
• “點擊”
• “長按”
• 地圖滑動時顯示中文“地圖移動中”
• 使用framelayout

GOOGLE MAP API UI

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設定
縮放按鈕
指南針按鈕
我的位置與按鈕
滑動手勢
縮放手勢
傾斜手勢
旋轉(變換方向)手勢

43Presented By: Duran Hsieh
GOOGLE MAP API UI
• UI：
• 建立一個簡單的地圖，包含上述UI
• https://github.com/matsurigoto/AndroidGoogleMapUISett
ingExample.git

Google map API 繪製線

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. 加入點擊事件

46Presented By: Duran Hsieh
GOOGLE MAP API 繪製線
• AndroidGoogleMapPolylineExample：
• https://github.com/matsurigoto/AndroidGoogleMapPolyli
neExample.git

目前問題彙整

48Presented By: Duran Hsieh
目前問題彙整
• 如何找 BUG ?
Step 1. android moniter
Step 2.logcat
Step 3.error ?

49Presented By: Duran Hsieh
目前問題彙整
• 如何找 DEBUG ?
Step 1.
Set Break point
Step 2.Debug Step 3.Next Step

50Presented By: Duran Hsieh
目前問題彙整
• 問題一 Error:Tag <uses-permission> attribute name
has invalid character ' '.

51Presented By: Duran Hsieh
目前問題彙整
• 問題二 Attempt to invoke virtual method ‘android.view.Window$Callback
android.view.Window.getCallback()' on a null object reference

52Presented By: Duran Hsieh
目前問題彙整
• 問題三 程式流程

實作：
Google map 與 GPS感測器

54Presented By: Duran Hsieh
實作：GOOGLE MAP 與 GPS感測器
• 建立一個隨著使用者移動的地圖
• GPS感測器 (上週教學)
• Google map 上顯示自己目前位置(marker)
• 衛星地圖
• 地圖隨著使用者移動
• Marker隨著使用者移動

QUESTION & ANSWERS

THANK YOU FOR
WATCHING