Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制（转载）

本文主要是介绍Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制（转载），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

高德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()
}

这篇关于Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制（转载）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！