vue人员轨迹_Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制

先看最后实现的效果图

高德地图api文档

使用

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()

}