效果圖：
根據插件文檔安裝一下AMap-Vue：
npm install --save @amap/amap-vue
按需引入：
// main.js
import AmapVueConfig from '@amap/amap-vue/lib/config';
AmapVueConfig.key = '開發者key';
直接貼index.vue代碼：
<template>
<div>
<div class="amap-wrapper">
<!-- 高德地圖 -->
<amap ref="myMap" :center="center" :zoom="zoom" @complete="mapLoading">
<!-- 左上角旋轉工具 -->
<amap-tool-bar />
<!-- 右下角縮放工具 -->
<amap-control-bar
:position="{
top: '10px',
left: '10px',
}"
/>
<!-- 起點標志位置 -->
<amap-marker ref="myMarker1" :position="position1" />
<amap-text
:position="position1"
:text="text1"
:dom-style="{
color: '#f00',
}"
/>
<!-- 終點標志 -->
<amap-marker ref="myMarker2" :position="position2" />
<amap-text
:position="position2"
:text="text2"
:dom-style="{
color: '#f00',
}"
/>
<!-- 軌跡 -->
<amap-polyline :stroke-weight="8" :path="path" stroke-color="#f00" />
<!-- 時間標志點 -->
<amap-marker
v-for="(item, key) in locationDetails"
:key="key"
:icon="iconimg"
:offset="[0, -10]"
:position.sync="item.path"
clickable
@mouseover="showMouseover(item)"
/>
<!-- 時間信息層 -->
<amap-info-window
:visible="!!coordinatesData"
:position="coordinatesData ? coordinatesData.path : null"
:offset="[10, -8]"
auto-move
is-custom
>
<div v-if="coordinatesData">
<div v-show="coordinatesTo">
<div class="parcel">
<i class="el-icon-close" @click="coordinatesData = null"></i>
<div class="text_li_css" style="padding-top: 30px">
時間：{{ coordinatesData.gtm }}
</div>
<div class="text_li_css">
經度：{{ coordinatesData.path[0] }}
</div>
<div class="text_li_css">
維度：{{ coordinatesData.path[1] }}
</div>
</div>
<div class="mark_css"></div>
</div>
</div>
</amap-info-window>
</amap>
</div>
</div>
</template>
<script>
import iconimg from '@/assets/images/transparent.png';
import Amap from '@amap/amap-vue/lib/amap';
import AmapMarker from '@amap/amap-vue/lib/marker';
import AmapText from '@amap/amap-vue/lib/text';
import AmapPolyline from '@amap/amap-vue/lib/polyline';
import AmapControlBar from '@amap/amap-vue/lib/control-bar';
import AmapToolBar from '@amap/amap-vue/lib/tool-bar';
import AmapInfoWindow from '@amap/amap-vue/lib/info-window';
export default {
components: {
Amap,
AmapMarker,
AmapText,
AmapPolyline,
AmapControlBar,
AmapToolBar,
AmapInfoWindow
},
data () {
return {
//引入的時間標志圖標
iconimg,
//時間標志位置數據
locationDetails: [],
//時間信息層坐標位置
coordinatesData: { path: [116.397447, 39.909183], gtm: "" },
//時間信息層初始隱藏
coordinatesTo: false,
//地圖顯示坐標位置
center: [116.397447, 39.909183],
//地圖初始縮放等級
zoom: 15,
//起點標志位置
position1: [0, 0],
text1: "起點位置",
//終點標志位置
position2: [0, 0],
text2: "終點位置",
//軌跡坐標數據
path: [],
//異步網絡請求的坐標數據
locationData: {}
}
},
methods: {
//地圖初始化調用
mapLoading () {
//發起網絡請求接口返回坐標數據
carriageTracesByTime({ vehicleId: 61 }).then((res) => {
//數據格式res.data:[{"lon":"73963554","lat":"25073040","gtm":"20210916/170808"},...]
this.locationData = res.data;
//起點標志位置
this.position1 = [this.locationData[0].lon, this.locationData[0].lat];
//終點標志位置
this.position2 = [this.locationData[this.locationData.length - 1].lon, this.locationData[this.locationData.length - 1].lat];
//地圖顯示坐標位置
this.center = [this.locationData[this.locationData.length - 1].lon, this.locationData[this.locationData.length - 1].lat];
//軌跡坐標數據
var path = [];
//時間標志位置數據
var locationDetails = [];
for (let i of this.locationData) {
path.push([i.lon, i.lat]);
locationDetails.push({
path: [i.lon, i.lat],
gtm: i.gtm
})
}
this.path = path;
this.locationDetails = this.intervalMethods(locationDetails);
});
},
//每隔60條就取一條時間坐標
intervalMethods (data) {
const mapData = data;
var i = 0;
const value = [];
const mapMethods = () => {
i += 60;
if (i < mapData.length) {
value.push(mapData[i]);
mapMethods();
}
else {
return
}
};
mapMethods();
return value;
},
//顯示時間信息層
showMouseover (data) {
this.coordinatesTo = true;
//時間信息層坐標位置
this.coordinatesData = data;
},
}
}
</script>
<style scoped>
.amap-wrapper {
width: 100%;
height: 700px;
}
/* 信息層css */
.parcel {
width: 220px;
height: 120px;
background-color: #fff;
border: 2px #3e94f9 solid;
font-size: 14px;
color: #000;
position: relative;
border-radius: 5px;
}
.el-icon-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
cursor: pointer;
}
.text_li_css {
width: 90%;
line-height: 20px;
margin-left: 18px;
}
.mark_css {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 14px solid #3e94f9;
margin-left: 100px;
}
</style>
intervalMethods()方法主要是為了坐標點數據太多一次性渲染太多時間點位直接導致瀏覽器頁面卡死未響應，如沒有這方面問題和需求可以忽略掉這個方法。
如果不需要時間標記信息層功能可以把 info-window 引入去掉和刪掉時間標記相關代碼。
