高德API:https://lbs.amap.com/api/javascript-api/summary
1.在index.html里面引入高德地图js文件
2.引入后直接可以在vue组件里面使用(创建initMap方法,在mounted 钩子函数中调用)
mounted(){ this.initMap() }, initMap(){ let that = this this.map = new AMap.Map('track-map', { zoom:11,//级别 center: [116.397428, 39.90923],//中心点坐标 resizeEnable: true, zoom: 12, }); // 插件 AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () { that.map.addControl(new AMap.ToolBar()) that.map.addControl(new AMap.Scale()) }) // marker标记 this.marker = new AMap.Marker({ position: null }) this.map.add(this.marker); // 绘制折线 this.path = new AMap.Polyline({ path: null, isOutline: false, //线条是否带描边,默认false outlineColor: '#ffeeff',//线条描边颜色,此项仅在isOutline为true时有效,默认:#000000 borderWeight: 1, //描边的宽度,默认为1 strokeColor: "#3366FF", //线条颜色,使用16进制颜色代码赋值。默认值为#006600 strokeOpacity: 1, //线条透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9 strokeWeight: 2, //线条宽度,单位:像素 // 折线样式还支持 'dashed' strokeStyle: "dashed", //线样式,实线:solid,虚线:dashed // strokeStyle是dashed时有效 strokeDasharray: [10, 5],//勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效 lineJoin: 'round', //折线拐点的绘制样式,默认值为'miter'尖角,其他可选值:'round'圆角、'bevel'斜角 lineCap: 'round', //折线两端线帽的绘制样式,默认值为'butt'无头,其他可选值:'round'圆头、'square'方头 zIndex: 50, //折线覆盖物的叠加顺序。默认叠加顺序,先添加的线在底层,后添加的线在上层。通过该属性可调整叠加顺序,使级别较高的折线覆盖物在上层显示默认zIndex:50、 }) // 将折线添加至地图实例 this.map.add(this.path); }, // 上面需要注意的地方是绘制折线和添加marker标记的时候,可以设置position和path的值为空,进来的时候就不会在地图上创建一个标记了
this.marker = new AMap.Marker({
position: null
})
// 最后在ajax请求接口获取到数据后动态绘制路线轨迹
if(res.code==2000){
// 历史路径经纬度集合
let trackPath = []
this.list.forEach((item,index) => {
trackPath.push(new AMap.LngLat(item.lng,item.lat))
});
this.path.setPath(trackPath)
this.path.show()
// 将最后一条记录添加marker标记
let lastTrack = new AMap.LngLat(this.list[0].lng,this.list[0].lat)
this.map.setCenter(lastTrack)
this.marker.setPosition(lastTrack)
this.marker.show()
}