開發工具:Android Studio
因為學弟妹最近好像都會想要在網路上找Android的Google Map怎麼開發,而網路上的好像很多都還是舊的,或者就是使用Javascript V3的教學,但是還是使用V2的好像比較好(一種Android就是要用Android的堅持)。
Step1. 開啟空白專案
因為教學方便,所以建議開啟空白專案,我有一組學弟妹因為直接開啟Google Map的專案,好像就做不下去,可能比較不適合初學者吧。
Step2. 申請Google Map的專案和Key
a. 進入此網址:https://console.developers.google.com/project
b. 建立新專案
c. 進入剛建立的專案首頁,之後選擇API和憑證,再選擇API,選擇Google Map Android API後會跳到下一頁,將API啟用。這一步驟不啟用,即使加入Google Service Key也沒有用。
進入專案首頁
選擇要開啟的API
開啟API,使"啟用API" 變成 "停用API"
d. 新增憑證,也就是幫你的APP註冊,讓你的APP可以辨識到此專案的憑證。可以參考此教學申請
Step3. 在Android Studio加入Google Map,此步驟就可以確認前面的步驟是否都成功。
a. 加入Google Play Service Maps到你的專案
在build.gradle加入下面的程式將google map library加入到專案內
compile 'com.google.android.gms:play-services-maps:7.8.0'
完整程式碼如下:
apply plugin: 'com.android.application'
android {
compileSdkVersion 22
buildToolsVersion "21.1.2"
defaultConfig {
applicationId "com.idlefox.mymap"
minSdkVersion 11
targetSdkVersion 22
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.1.1'
compile 'com.google.android.gms:play-services-maps:7.8.0'
}
我的專案畫面
若是出現 Could not find 'com.google.android.gms:play-services-maps:7.8.0',請到SDK Manage 更新下圖中四項內容
b. 新增APP的網路Permission
在AndroidManifest.xml增加以下三行
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
c. 新增APP的位置Permission
在AndroidManifest.xml增加以下兩行
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
d. 新增Google Map需要的描述
在AndroidManifest.xml增加以下兩項
並且替換下面 "your_google_map_key"
<meta-data
android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="your_google_map_key" />
AndroidManifest.xml完整程式碼如下:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.idlefox.mymap" >
<!-- internet premission-->
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<!-- location premission-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<meta-data
android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="@string/google_map_key" />
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
e. 增加Google Map到你的畫面上
在activity_main.xml加入下列程式碼
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/map"
tools:context=".MapsActivity" />
完成以上步驟應該就可以將程式燒入你的手機或模擬器內,應該就可以看到下面的畫面,有出現地圖就是成功的。
Step4. 設定你的Google Map
Google Map 的功能大家應該都不陌生,陌生的話就可以打開手機內的Google Map App,以下是一些簡單操作就可以做出來的功能。
mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
mMap.setMyLocationEnabled(true); // 右上角的定位功能
mMap.getUiSettings().setZoomControlsEnabled(true); // 右下角的放大縮小功能
mMap.getUiSettings().setCompassEnabled(true); // 左上角的指南針,要兩指旋轉才會出現
mMap.getUiSettings().setMapToolbarEnabled(true); // 右下角的導覽及開啟 Google Map功能
// 為了讓Google Map的Toolbar得以使用,所以要先建立一個Marker(地標物)
mMap.addMarker(new MarkerOptions()
.position(new LatLng(10, 10))
.title("Hello world"));
下面就是成果
常見問題:
Q1. 如果地圖是白畫面,連經緯度的線都沒事,是什麼問題?
A1. 通常是Google Map Key 沒有加,若是剛加入,經過一兩分鐘都沒有出現,請確認Key對不對。