iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Mobile Development

Android 口罩地圖入門實戰 30 天 (使用 Kotlin 程式語言)系列 第 27

Day 27:Google Map 範本學習(2)

本篇文章同步發表在 HKT 線上教室 部落格,線上影音教學課程已上架至 UdemyYoutube 頻道。另外,想追蹤更多相關技術資訊,歡迎到 臉書粉絲專頁 按讚追蹤喔~

今天我們來看看,在昨天 Google Map 範本範例當中,被加入了哪些程式,即可以快速完成地圖標示的 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
    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))
 }
}

輸出結果

參考資料

HKT 線上教室
https://tw-hkt.blogspot.com/

Freepik
https://www.freepik.com/

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


那今天【iThome 鐵人賽】就介紹到這邊囉~

順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,追蹤喔!也歡迎大家將這篇文章分享給更多人喔。

我們明天再見囉!!!掰掰~


上一篇
Day 26:Google Map 範本學習(1)
下一篇
Day 28:Google Map 顯示目前位置
系列文
Android 口罩地圖入門實戰 30 天 (使用 Kotlin 程式語言)30

尚未有邦友留言

立即登入留言