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


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

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会使小车速度失效。

GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 2 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐