在网页上嵌入Google Map及设置图钉的方法 (下)

接续上一篇使用iframe来实现这个功能，这一篇将介绍使用Vue的套件：vue3-google-map来完成嵌入地图及设置图钉。

在官方文件有提到，若要使用此套件，我们要先取得Google Map API 金钥。大家可以依这里的说明走，首先要建立Google Cloud 专案并设定信用卡资讯才可以开始使用相关API并取得金钥，这边就不赘述详细流程了。

在我们取的金钥后，就可以开始进入重头戏！

第一步：安装套件

npm install vue3-google-map

第二步：写入相关程式﹙以下使用Options API写法﹚

<template><!-- 地图 -->    <GoogleMap  api-key="YOUR_GOOGLE_MAPS_API_KEY"  style="width: 100%; height: 500px"  :center="center"  :zoom="15"  >  <!-- 图钉 -->  <Marker :options="markerOptions"></Marker>  </GoogleMap></template><script>  // 将Google Map 与 图钉引入import { GoogleMap, Marker } from 'vue3-google-map';  export default {    components: { GoogleMap, Marker },    data() {      return {        center: {    // lat:纬度, lng:经度lat: 25.12662, lng: 121.45747 },        markerOptions: {     position: { lat: 25.12662, lng: 121.45747 },        },      }   },  };</script>

注：金钥不建议直接写在template上，可先写到.env档后再使用环境变数带入

基本上，这样写完就可以简单呈现Google Map与地点图钉了~
在这边也简单说明一下相关属性及设定：

当然，vue3-google-map针对地图还有其他的设定，若大家有需要还可以继续再深入研究，但必须搭配Google文件一起阅读才会比较清楚相关的内容。

优点：更高的灵活性、更多可以客製化的功能
缺点：需对Vue有了解，若需要比较複杂的设定会花比较多时间研究，除了官方文件，还需要搭配Google文件一起阅读才会比较清楚

以上，就是我这一次的学习纪录，若有错误也欢迎告诉我，Bye！

※ 参考文件：vue3-google-map