Vue中使用高德地图历史轨迹回放(一)-基础功能

第一步：引入高德地图

要达到官方高德地图API中的效果，可以先看官方API 链接：https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data

我们可以像官方一样的在index.html里面引入高德地图：

无论在vue和html页面中都可以这样引入，百度地图也是如此。

如果是vue项目我们可以直接通过 npm i vue-amap -S 安装在我们项目里面

第二步：main.js中配置

在main.js中配置

import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
  key: "你的key",
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

第三步：初始化地图和轨迹

配置好了main.js 就可以在你vue页面中使用了，给定一个div容器 id=‘container’,初始化高德地图

//初始化地图
  initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true, //窗口大小调整
        center: this.firstArr, //中心 firstArr: [116.478935, 39.997761],
        zoom: 20
      });
      this.marker = new AMap.Marker({
        map: this.map,
        position: this.firstArr,
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13), //调整图片偏移
        autoRotation: true, //自动旋转
        angle: -90 //图片旋转角度
      });
    },
//初始化轨迹
  initroad() {
      //绘制还未经过的路线
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色--蓝色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      //绘制路过了的轨迹
      var passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: "#AF5", //线颜色-绿色
        //path: this.lineArr,
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      this.marker.on("moving", e => {
        
        passedPolyline.setPath(e.passedPath);
      });
      this.map.setFitView(); //合适的视口
    },
        
   
  mounted() {
      this.initMap();
      this.initroad();
  },

这样你就可以看到和官方例子中一样的效果了----不过你是从其他路由跳转进来的才有这个效果。

注意 ：你在该页面手动刷新浏览器一下 就会发现报错

 [Vue warn]: Error in mounted hook: "ReferenceError: AMap is not defined"

在你执行初始化的时候，AMap 是 not defined。

小知识：undefined 与 not defined
undefined是javascript语言中定义的五个原始类中的一个， 声明了，未定义。undefined并不是程序报错，而是程序允许的一个值。
not defined是 没有定义也没有声明，他其实就是不存在

所以要异步一下，加个延迟就好了，等页面上的数据都加载好了在执行初始化地图

mounted() {
    setTimeout(() => {
      this.initMap();
      this.initroad();
    }, 1000);
  },

第四步：轨迹回放控制

轨迹回放控制：开始动画，暂停动画，继续动画，停止动画

	startAnimation() {
      this.marker.moveAlong(this.lineArr, this.markerSpeed);
    },
    pauseAnimation() {
      this.marker.pauseMove();
    },
    resumeAnimation() {
      this.marker.resumeMove();
    },
    stopAnimation() {
      this.marker.stopMove();
    },

注意：你可能会遇到一个报错，当你开发人员历史轨迹的时候，你开启了张三的运动轨迹，但是在他还未停止的时候，你又查看了李四的历史轨迹，那么他会报一个错，实际上你得在开始动画startAnimation时就停止一下上一个动画 this.marker.stopMove()。