在地圖導航應用中，選擇一個標記點是非常關鍵的。借助Vue框架，我們可以輕松地實現一個地圖選點應用。在這個應用中，用戶可以點擊地圖上的一個點或搜索一個地點，然后將標記點添加到地圖上。 在首先安裝Vue之后，我們需要引用地圖API庫和Vue-google-maps來實現地圖的顯示。在使用前，需要先注冊ggm來獲取API KEY。安裝完成后，在main.js文件中引入：

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY',
libraries: 'places' 
}
})

然后在Vue組件中使用VueGoogleMaps組件:

<template>
<div style="width: 100%;height: 600px">
<gmap-map
:center="center"
:zoom="zoom"
@click="addMarker"
ref="map"
style="width: 100%; height: 100%; position: relative;"
>
<gmap-marker
v-for="(m, index) in markers"
:key="index"
:position="m.position"
:clickable="true"
@click="activateMarker(m)"
/>
</gmap-map>
</div>
</template>
<script>
export default {
name: 'map',
data() {
return {
center: {},
zoom: 10,
markers: []
};
},
methods: {
addMarker(e) {
this.markers.push({ position: e.latLng, active: false });
},
activateMarker(m) {
this.deactivateAllMarkers();
this.$set(m, 'active', true);
this.center = m.position;
},
deactivateAllMarkers() {
this.markers.forEach(m => this.$set(m, 'active', false));
}
},
mounted() {
navigator.geolocation.getCurrentPosition(position => {
this.center = { lat: position.coords.latitude, lng: position.coords.longitude };
});
}
};
</script>

在這個組件中，定義了一個地圖和一些標記點。當用戶在地圖上或搜索一個位置時，可以向地圖中添加標記點。當用戶點擊一個標記點時，標記點會被激活，地圖則會以激活標記點為中心。通過這種方式，用戶可以在地圖上選擇自己的地點。 下面是一些使用Vue-google-maps API的方法實現： 1. 獲得用戶的當前位置。使用navigator.geolocation.getCurrentPosition() 方法，通過用戶的瀏覽器定位獲取用戶的位置。 2. 監聽click事件。可用@click監聽事件，在addMarker()方法中獲取用戶點擊位置。 3. 添加標記點。將坐標位置添加到markers[]數組。 4. 選定標記點。通過activateMarker()方法，在預覽圖標上調用$set()來標記此標記點的狀態。 通過這些方法，我們可以輕松地實現一個Vue地圖選點應用。該應用可以用于在線地圖導航和其它地圖應用上。