iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Mobile Development

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

Day 30:Google Map 結合口罩資料 & 鐵人賽最後一天

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

程式碼範例

範例名稱:Google Map 結合口罩資料
開發人員:HKT (侯光燦)
程式語言:Kotlin
開發環境:Android Studio 4.1.2 & Android 11 & Kotlin 1.4.30
授權範圍:使用時必須註明出處且不得為商業目的之使用
範例下載點:點我下載

今天是鐵人賽的最後一天,我們將會把之前所學習的內容做一個整合,實作出 Google Map 結合口罩資料的應用。在地圖上透過圖釘標示的方式,顯示每間藥局所在的位置,然後如果我們點擊圖釘標示,將會以小張卡片的方式,顯示該間藥局名稱與當下成人、小孩口罩數量。若繼續點擊卡片,則會跳到藥局詳細頁。

口罩地圖 Wireframe

下載口罩資料

在 MapActivity 加入之前下載口罩資料的方法 getPharmacyData。

private fun getPharmacyData() {
    //顯示忙碌圈圈
    progressBar.visibility = View.VISIBLE

    OkHttpUtil.mOkHttpUtil.getAsync(PHARMACIES_DATA_URL, object : OkHttpUtil.ICallback {
        override fun onResponse(response: Response) {
            val pharmaciesData = response.body?.string()

            Log.d("QQQ", "pharmaciesData:$pharmaciesData")

            pharmacyInfo = Gson().fromJson(pharmaciesData, PharmacyInfo::class.java)

            runOnUiThread {
                //關閉忙碌圈圈
                progressBar.visibility = View.GONE
                addAllMaker()
            }

        }

        override fun onFailure(e: okio.IOException) {
            Log.d("HKT", "onFailure: $e")

            //關閉忙碌圈圈
            progressBar.visibility = View.GONE
        }
    })
}

加入所有口罩資料標記

private fun addAllMaker() {
    pharmacyInfo?.features?.forEach { feature ->
        val pinMarker = googleMap?.addMarker(
            MarkerOptions()
                .position(
                    LatLng(
                        feature.geometry.coordinates[1],
                        feature.geometry.coordinates[0],
                    )
                )
                .title(feature.property.name)
                .snippet(
                    "${feature.property.mask_adult}," +
                            "${feature.property.mask_child}"
                )
        )
    }

}

將所有口罩資料,加入地圖標記,移動畫面過程中,會有很明顯會出現效能使用上的問題,實際上只要載入螢幕畫面範圍的口罩資料即可,螢幕畫面外的口罩資料可以清除。

實作 OnInfoWindowClickListener

宣告將實作 OnInfoWindowClickListener,自定義當我們點擊資訊視窗,要處理的相關邏輯。

class MapActivity : AppCompatActivity(), OnMapReadyCallback, GoogleMap.OnInfoWindowClickListener {

}

設定資訊視窗、資訊視窗點擊監聽

加入 setOnInfoWindowClickListener。

override fun onMapReady(googleMap: GoogleMap) {
    this.googleMap = googleMap
    googleMap.moveCamera(
        CameraUpdateFactory.newLatLngZoom(
            defaultLocation, 15f
        )
    )
googleMap?.setInfoWindowAdapter(MyInfoWindowAdapter(mContext))
googleMap?.setOnInfoWindowClickListener(this)

//        getLocationPermission()
}

資訊視窗點擊事件

點擊「自定義資訊視窗」後,將點擊當下項目的藥局資料,傳遞並打包跳轉到詳細資訊頁。

override fun onInfoWindowClick(marker: Marker?) {
    marker?.title?.let { title ->
//            Log.d("HKT", title)

        val filterData =
            pharmacyInfo?.features?.filter {
                it.property.name == (title)
            }

        if (filterData?.size!! > 0) {
            val intent = Intent(this, PharmacyDetailActivity::class.java)
            intent.putExtra("data", filterData.first())
            startActivity(intent)
        } else {
            Log.d("HKT", "查無資料")
        }
    }
}

輸出結果

參考資料

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

Freepik
https://www.freepik.com/


30天的鐵人賽終於完賽了,最後一天,心情跟 2020 奧運跆拳道國手「羅嘉翎」,奪牌在舞台上高舉會旗奔跑一樣開心。希望這系列文章,在未來開發的道路上可以幫助到大家。

那這一次【iThome 鐵人賽】就介紹到這邊囉~

如果你從第一天看到最後一天,誠摯的感謝你的訂閱與關注,

我是HKT,我們下次鐵人賽再見囉!!!掰掰~


上一篇
Day 29:Google Map 自訂資訊視窗
系列文
Android 口罩地圖入門實戰 30 天 (使用 Kotlin 程式語言)30

尚未有邦友留言

立即登入留言