Day 27：Google Map 范本学习(2)

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

今天我们来看看，在昨天 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))
 }
}