高德地图巡航器

示例地址：轨迹展示&巡航-轨迹展示-示例中心-JS API UI 组件示例 | 高德地图API

轨迹：获取经纬度会原道定位不准确问题，高德官网给了专门解决问题的方案：

                  轨迹纠偏-在地图上绘制-开发指南-Android 地图SDK | 高德地图API

1.封装方法，渲染地图

init() {
     //首先，渲染地图实例
      var that = this;
      var map = new AMap.Map("map", {
        zooms: [11, 16],
        center: [120.17268, 30.353873],
        features: ["bg", "road", "point"],
        // mapStyle: "amap://styles/styles/57994c871bb604a4c79184f5f65d8782"
        mapStyle: "amap://styles/423fbc9befa1b809f8edf1d2d79dca31"

        // mapStyle: 'amap://styles/dbe75e10a35d68f7676a6f6299936152',
        // layers: [
        //   new AMap.TileLayer.RoadNet()
        // ]
      });
      window.map = map;
      
      //引入高德地图轨迹组件库，页面地图加载调用此方法
      AMapUI.load(["ui/misc/PathSimplifier"], function(PathSimplifier) {
        if (!PathSimplifier.supportCanvas) {
          alert("当前环境不支持 Canvas！");
          return;
        }

        //启动页面
        initPage(PathSimplifier);
      });
       
      function initPage(PathSimplifier) {
        window.PathSimplifier = PathSimplifier;
        //创建组件实例
        window.pathSimplifierIns = new PathSimplifier({
          zIndex: 100,
          map: window.map, //所属的地图实例
          autoSetFitView: false,
          getPath: function(pathData, pathIndex) {
            //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 
             [[lng|number,lat|number],...]
            return pathData.path;
          },
          getHoverTitle: function(pathData, pathIndex, pointIndex) {
            //返回鼠标悬停时显示的信息
            if (pointIndex >= 0) {
              //鼠标悬停在某个轨迹节点上
              return (
                pathData.name +
                "，点:" +
                pointIndex +
                "/" +
                pathData.path.length
              );
            }
            //鼠标悬停在节点之间的连线上
            return pathData.name + "，点数量" + pathData.path.length;
          },
          renderOptions: {
            // keyPointTolerance: 0,
            // renderAllPointsIfNumberBelow: 15,
            // keyPointStyle: {
            //   radius: 2, // 点的半径
            //   fillStyle: '#FF8C00', // 填充色，比如 red, rgb(255,0,0), rgba(0,0,0,1)等
            //   strokeStyle: '#eeeeee', // 描边色
            //   lineWidth: 1 // 描边宽度
            // },

            //轨迹线的样式
            pathLineStyle: {
              strokeStyle: "#F5BA45",
              lineWidth: 6,
              dirArrowStyle: true
            }
            // startPointStyle: {
            //   //起点
            //   radius: 4,
            //   fillStyle: "#109618",
            //   lineWidth: 8,
            //   strokeStyle: "#eeeeee"
            // },
            // endPointStyle: { }   //终点
          }
        });
      }
    },