vue使用高德地图实现订单历史轨迹

本来是想用vue-amap ，最后发现没有那样的可以参考的。于是转战高德原生地图。效果图在最后面。（一打开弹框，就能看到车子动态运行的轨迹，一个子就开始跑起来了）（本例子经过线上环境的检验，可直接复用）

一、引入高德地图

1.在index.html中引入高德地图

<!--引入高德地图原生jar包-->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德key"></script>

2.在vue.config.js 中或者 webpack.base.conf.js 中引入（不同的项目可能有不一样的文件）

module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap' // 高德地图配置
    }
  }
}

二、上代码

 <el-table-column label="操作" align="center">
         
            <el-button type="success" @click="queryOrderTrack(scope.$index, scope.row)">查看历史轨迹</el-button>
          </template>
        </el-table-column>

 <!-- 轨迹弹出框, -->
    <el-dialog :visible.sync="trackVisible" title="订单轨迹" @close="closeBatteryHistroy" width="70%">
      <div id="map-container" style="width:100%; height:600px"></div>
    </el-dialog>

<script>
//import orderMap from "./OrderMap";
//引入高德地图
import AMap from "AMap";
export default {
  name: "orderList",
  //components: { orderMap },
  data() {
    return {
      listLoading: true,
      dialogVisible: false, //电池轨迹dialog
      //地图
      map: null,
      marker: null,
      polyline: null,
      passedPolyline: null,
      selectedDate: [],
      markerArr: [], //电池经纬度,也用于画线
      startIcon: new AMap.Icon({
        //起点图标
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
        // 图标所用图片大小
        imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3)
      }),
      endIcon: new AMap.Icon({
        //终点图标
        size: new AMap.Size(25, 34),
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3)
      })
  },
  },

  methods: {
   
    //点击查看历史轨迹
    queryOrderTrack(index, row) {
      let that = this;
      that.trackVisible = true;
      that.$nextTick(() => {
        //初始化地图
        that.initMap();
      });

      that.listLoading = true;
      //接口获得数据后转换，高德接受的数据格式为[[115.823166,28.696888],[经度,纬度]]
      setTimeout(() => {
        that.listLoading = false;
        var orderId = row.id;
        this.$post("后端接口路径", {
          orderId: orderId
        })
          .then(result => {
            if (result.data.code === 0) {
              let data = result.data.data;
              if (data.length > 0) {
                for (let i = 0; i < data.length; i++) {
                  let tempArr = [];
                  tempArr.push(data[i].lng);
                  tempArr.push(data[i].lat);

                  //格式转换后push进订单经纬度
                  that.markerArr.push(tempArr);
                }
                that.$nextTick(() => {
                  //画线
                  that.playLine();
                });
              }
            } else {
              that.$message.warning(result.data.msg);
            }
          })
          .catch(error => {
            that.$message.error(error.message);
          });
      }, 1000);
    },

    //初始化地图
    initMap() {
      let that = this;
      that.map = new AMap.Map("map-container", {
        resizeEnable: true,
        zoom: 7
        // center: [120.6641561, 31.3063851] //地图中心点  使用下面的浏览器精确定位,注释这个中心点的初始化
      });
      AMap.plugin(["AMap.ToolBar"], function() {
        //加载工具条
        var tool = new AMap.ToolBar();
        that.map.addControl(tool);
      });

      //浏览器精确定位-定位点自定义  使用这个定位，就不需要上面的初始化地图时的 center
      let options = {
        showButton: true, //是否显示定位按钮
        buttonPosition: "LB", //定位按钮的位置
        /* LT LB RT RB */
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
        showMarker: true, //是否显示定位点
        markerOptions: {
          //自定义定位点样式，同Marker的Options
          offset: new AMap.Pixel(-18, -36),
          content:
            '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
        }
      };

      AMap.plugin(["AMap.Geolocation"], function() {
        var geolocation = new AMap.Geolocation(options);
        that.map.addControl(geolocation);
        geolocation.getCurrentPosition();
      });
    },

    //画线
    playLine() {
      let that = this;
      //初始化起点终点
      that.initStartEnd();
      that.marker = new AMap.Marker({
        map: that.map,
        //小车出初始位置
        position: that.markerArr[0],
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90
      });
      // 绘制轨迹
      that.polyline = new AMap.Polyline({
        map: that.map,
        path: that.markerArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      //小车移动的轨迹线
      that.passedPolyline = new AMap.Polyline({
        map: that.map,
        // path: that.markerArr,
        strokeColor: "#AF5", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      //marker移动时把经纬度传给小车移动的轨迹线
      that.marker.on("moving", function(e) {
        //设置组成该折线的节点数组
        that.passedPolyline.setPath(e.passedPath);
      });
      // marker开始移动
      that.marker.moveAlong(that.markerArr, 200);
      //自适应放大
      setTimeout(() => {
        that.map.setFitView();
      }, 500);
    },
    //初始化起点终点
    initStartEnd() {
      let that = this;
      //将icon添加进marker
      let startMarker = new AMap.Marker({
        position: new AMap.LngLat(that.markerArr[0][0], that.markerArr[0][1]),
        icon: that.startIcon,
        offset: new AMap.Pixel(-13, -30)
      });
      //将icon添加进marker
      let endMarker = new AMap.Marker({
        position: new AMap.LngLat(
          that.markerArr.pop()[0],
          that.markerArr.pop()[1]
        ),
        icon: that.endIcon,
        offset: new AMap.Pixel(-13, -30)
      });

      // 将 markers 添加到地图
      that.map.add([startMarker, endMarker]);
    },
    //关闭弹窗时
    closeBatteryHistroy() {
      this.selectedDate = [];
      this.markerArr = []; //订单司机位置经纬度,也用于画线
    },

    

  }
};
</script>


<style scoped>

</style>

官方实例参考：

https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data/?sug_index=6

三、效果图