【Android 入門開發實戰：口罩地圖】Google Map 範本學習(2)

作者： -

 

【Android 入門開發實戰：口罩地圖】線上免費講義課程目錄

我們可以看看範例中，被加了哪些程式，即可以快速完成地圖標示的 APP。到時我們口罩地圖要加入 Google Map 地圖應用，如法炮製即可。

申請金鑰

前往 Google API Console，登入 Google 帳號，選擇新建專案或選舊有專案 → 憑證 → API 。即可以產生新的 key。

設定金鑰

產生新的金鑰後，可以點擊金鑰名，即可以進入該筆金鑰進行設定，可以更改金鑰名稱、綁定APP套件名稱與 SHA1 憑證指紋，防止別人冒用。

取得 SHA1 憑證指紋

快速取得 SHA1 憑證指紋方法，可以點擊 Android Studio 右側的 Gradle 視窗，展開後可以找到 app -> Tasks -> android -> signingReport，直接執行此腳本，即可以取得本機正式、測試 keystore 等相關憑證指紋。

輸出結果

添加 map 依賴庫 (dependencies)

implementation 'com.google.android.gms:play-services-maps:17.0.0'

加入金鑰

在 AndroidManifest.xml ，加入在 Google API Console 申請到的金鑰。<meta-data> 需加入在 <application> 裡面子項目中。

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="@string/google_maps_key" />

畫面佈局

在 activity_maps.xml 加入 fragment 標籤，最關鍵是 android:name 需要設定為：「com.google.android.gms.maps.SupportMapFragment」

 <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MapsActivity" />

MapsActivity

onCreate 起來獲取 map 的 View 為 mapFragment，然後呼叫 getMapAsync 初始化地圖。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_maps)

    val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
    mapFragment.getMapAsync(this)
}

MapsActivity 實作 OnMapReadyCallback ，當 Map 準備好，則會回呼(CallBack) onMapReady，我們在裡面透過地圖提供的 addMarker 方法，加入一個雪梨的圖釘座標。並透過 moveCamera 方法，將手機地圖畫面移動到此處。

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

...
...
...

override fun onMapReady(googleMap: GoogleMap) {
    mMap = googleMap

    // Add a marker in Sydney and move the camera
    val sydney = LatLng(-34.0, 151.0)
    mMap.addMarker(MarkerOptions().position(sydney).title("Marker in Sydney"))
    mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney))
 }
}

輸出結果

參考資料

地圖物件
https://developers.google.com/maps/documentation/android-sdk/map?hl=zh-tw