调用高德地图展示车辆行驶轨迹

如何在页面中使用高德地图并分页展示多段历史轨迹

1. 引入高德地图的JavaScript API
   打开index.html(key-后面的内容是你自己在高德上申请 的key)
2. 引入高德组件
   
3. 配置webpack
   找到webpack.base.conf.js文件，找到module.exports,在externals中加上一行’AMap’: ‘AMap’

externals{
'AMap': 'AMap'
},

5. 在页面中引入高德地图

import AMap from 'AMap'

6. 页面挂载时加载地图(调用自定义方法)

mounted(){
 this.getHisGpsInfo(this.bizDate)
},

7. 定义的加载地图轨迹的方法

      // 这个方法主要是调用自己的接口获取数据以及定义参数 bizDate是查询日期
      getHisGpsInfo(bizDate){
        let params={
          sDate:bizDate,//日期
          devNum:this.$route.query.devNum//前一个页面传来的参数设备名称
        }
        // 调用接口 获取数据
        NetUtil.doGetOpera('/fhGps/getHisFhGpsInfo02',{params},json=>{
          let data=json.data;// data是数组类型 let的数据data仅在当前方法体中有效 主要用于判断是否有数据
          if (data==undefined||data==null||data.length==0){
            return;
          }
          //有数据的情况下
          this.list=json.data;
          this.currentPage=1;// 由于每辆车当天有不同时间段的车程 所以有几段历史轨迹会在不用页面上展示
          this.totalPage=json.data.length;//数组的长度即有几个历史轨迹
          this.drawMap() // 调用绘制轨迹的方法
        },error=>{
          Toast(error)
        })
      },

      //绘制地图轨迹
      drawMap(){
        let pathData=this.list[this.currentPage-1] // 当前页的data数据即当天的第(this.currentPage-1)个轨迹数据
        let colorIndex=this.currentPage%5; // 当前页取余5 如果是第一页的话 结果为1 [0,4] 因为一个页面就能看5个页面之后就翻面了(分页自定义 看你一个页面想显示几段轨迹了，注意这里不是地图上显示几段轨迹)
        let color=this.colors[colorIndex];
        this.item=pathData
        let name=pathData.name;// 0-21-02-26路线 类似于这种
        this.distance=pathData.distance;// 行驶里程？ 都是0
        this.startTime=pathData.beginTime;// 开始时间
        this.endTime=pathData.endTime;// 结束时间
        console.log(JSON.stringify(pathData))
        let map = new AMap.Map('container', {
          zoom: 13,
           center: pathData.paths[0]
        });
        function onerror(e) {
          //alert('图片加载失败！');
        }

        AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
          if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
          }
          var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,// 绘制用图层的叠加顺序值
            //autoSetFitView:false,
            map: map, //所属的地图实例
            //pathData轨迹数据项 pathIndex轨迹索引
            getPath: function(pathData, pathIndex) {
              // 返回的是轨迹的节点坐标数组
              return pathData.path;
            },
            // 鼠标在轨迹上显示的内容 pointIndex 是轨迹节点索引
            getHoverTitle: function(pathData, pathIndex, pointIndex) {
              // 表明鼠标悬停在某个节点上
              if (pointIndex >= 0) {
                //point
                return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
              }
              // 鼠标悬停在节点之间的连线上
              return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {
              renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
            }
          });

          function onload() {
            //alert('图片显示')
            pathSimplifierIns.renderLater();
          }
          window.pathSimplifierIns = pathSimplifierIns;
          // setData设定数据源数组 并触发重新绘制
          pathSimplifierIns.setData([{
            name: name,
            path: pathData.paths
          }]);
          // 创建巡航器
          let nav = pathSimplifierIns.createPathNavigator(0, {
            loop: false,// 巡航器是否一直循环 false就是只放一遍
            speed: 50000,// 巡航器速度 千米/小时
            // 自定义巡航器样式
            pathNavigatorStyle: {
              initRotateDegree: 0,
              width: 16,// 这里是巡航器箭头的宽高
              height: 16,
              autoRotate: true,// 是否根据路径方向进行角度旋转
              lineJoin: 'round',
              content: 'defaultPathNavigator',//巡航器的内容 defaultPathNavigator（默认）, circle（圆形），none（空）
              //content: PathSimplifier.Render.Canvas.getImageContent('../../assets/image/gps_track.png', onload, onerror),
              fillStyle: color,// 填充色
              strokeStyle: color,// 描边色
              lineWidth: 6,// 箭头处线宽？ 描边宽度
              // 巡航器经过的路径的样式
              pathLinePassedStyle: {
                lineWidth: 2,// 线宽
                strokeStyle: color,// 线颜色
                borderWidth: 1,// 描边宽度
                borderStyle: color,//描边颜色
                dirArrowStyle: false// 方向箭头样式 lineWidth>=4时有效属性继承pathlineStyle 为true时使用默认配置
              }
            }
          });
          // 开启路径巡航
          nav.start();
        });

      },