Vue3 - 在網頁上嵌入Google Map及設置圖釘的兩種方法

更新於 2024/10/20發佈於 2024/02/28閱讀時間約 7 分鐘

前言

最近在開發個人作品，剛好想要實現在網頁中放入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>