学习笔记——vue中使用高德地图中轨迹回放时，小车移动速度过快问题

古城微笑少年丶 2023-01-19 12:50 928阅读 0赞

> 问题：在vue中，使用高德地图中的轨迹回放，来展现小车的移动轨迹。但是小车移动速度过快，修改moveAlong()中的参数也没用。

--------------------

首先，需要进入高德开放平台，注册并登录控制台。在应用管理=>我的应用中创建一个应用。在新创建的一个应用中添加一个key。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

**1.引入高德地图：**

1.npm下载
    npm i vue-amap --save
    
    2.main.js导入
    import VueAMap from 'vue-amap'
    Vue.use(VueAMap);
    VueAMap.initAMapApiLoader({
      // 高德key
      key: '你的key',
      // 插件集合 （插件按需引入）
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView',
    'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer', 'AMap.MoveAnimation'],
      v: '1.4.15',
      uiVersion: '1.0.11'
    })

或者

在vue项目中public文件夹下的index.html文件中
    <script type="text/javascript" language="javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=你的key&plugin=AMap.ControlBar,AMap.ToolBar,AMap.MoveAnimation"></script>

**2.使用高德地图：**

在vue组件中直接使用
          // 初始化地图
          initMap() {
            this.map = new AMap.Map('container',{
                resizeEnable: true,
                center: this.centerArr,
                zoom: 18
            })
            AMap.plugin('AMap.MoveAnimation', function(){});
    
            this.marker = new AMap.Marker({
              map: this.map,
              position: [116.478935,39.997761],
              icon: "https://webapi.amap.com/images/car.png",
              offset: new AMap.Pixel(-26, -13),
              autoRotation: true,
              angle: -90,
            });
            this.load2DMap()
          },
          // 绘制运动轨迹
          load2DMap() {
            this.lineArr = [[116.478935,39.997761],[116.478939,39.997825],
    [116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],
    [116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],
    [116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],
    [116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],
    [116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],
    [116.48367,39.998968],[116.484648,39.999861]];
    
            // 绘制轨迹
            var polyline = new AMap.Polyline({
              map: this.map,
              path: this.lineArr,
              showDir:true,
              strokeColor: "#28F",  //线颜色
              strokeWeight: 6,      //线宽
            });
            // 将折线添加至地图实例
            var passedPolyline = new AMap.Polyline({
              map: this.map,
              strokeColor: "#AF5",  //线颜色
              strokeWeight: 6,      //线宽
            });
            this.marker.on('moving',e => {
              passedPolyline.setPath(e.passedPath);
            });
            this.map.setFitView();
          },
          // 退出地图
          exitMap() {
            this.isShowMap = false
          },
          // 开始动画
          startAnimation() {
            let that = this.speed
            this.marker.moveAlong(this.lineArr, that) 
          },
          // 暂停动画
          pauseAnimation() { this.marker.pauseMove(); },
          // 继续动画
          resumeAnimation() { this.marker.resumeMove(); },

**出现以上问题的原因：在于高德地图的版本问题：**

**v1.4.4或者v1.4.15都可以让小车按指定速度运行。但是最新的v2.0会使小车速度失效。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221021/c30ff4a591a54f8f901f89d2a0248cb3.png