前言
最近在開發個人作品，剛好想要實現在網頁中放入Google Map及設置圖釘，所以花了一些時間查詢、研究，發現其實有很多的方法或套件都可以實現這個功能！這邊將會紀錄兩種做法及其優缺點，分別為使用 iframe 及使用套件vue3-google-map。
一、 iframe
使用iframe應該是最簡單又快速的作法，iframe是HTML的內聯框架元素，它可以將另一個HTML頁面嵌入至當前網頁。
取得方式：
- 打開Google Map搜尋你想要的地點﹙以下使用關渡大橋舉例﹚
- 點擊分享 → 嵌入地圖 → 複製HTML
取得相關的HTML以後，我們就可以使用啦
<template>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5108.605898615278!2d121.45593008805143!3d25.124536107237553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442af64b3a34a59%3A0x19f77dbe72e65285!2z6Zec5rih5aSn5qmL!5e0!3m2!1szh-TW!2stw!4v1709119611724!5m2!1szh-TW!2stw"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</template>
在這邊可以看到它有很多的屬性，我們可以再依需求去調整
- src：要嵌入的網頁URL
- width：顯示寬度﹙預設為px﹚
- height：顯示高度﹙預設為px﹚
- style：CSS樣式設計
- allowfullscreen：是否啟動全螢幕模式﹙可視性會因瀏覽器或設備而異﹚
- loading：是否應該在頁面加載時立即加載﹙eager﹚，或者僅在需要時加載﹙lazy﹚
- referrerpolicy：控制瀏覽器發送的引薦信息﹙即告訴被嵌入內容是從哪個網頁中載入的﹚
優點：快速、方便、簡單
缺點：同一開始所提，<iframe>是將另一個HTML頁面嵌入至當前網頁操作，所以對網頁效能、維護性、資安並非很有利
二、 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！
※ 參考文件
