Day 30：Google Map 结合口罩资料＆铁人赛最後一天

本篇文章同步发表在 HKT 线上教室部落格，线上影音教学课程已上架至 Udemy 和 Youtube 频道。另外，想追踪更多相关技术资讯，欢迎到脸书粉丝专页按赞追踪喔～

程序码范例

范例名称：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", "查无资料")
        }
    }
}