高德地图轨迹回放动画运动不准确

Question

vue框架，使用高德地图的轨迹回放功能，发现轨迹回放的时候，那个行动的marker图标不沿着路线走，或者可以说不准确，现在毫无头绪，望帮忙出出主意

Answer 1

以下内容部分参考ChatGPT模型：

---

你好，根据你的描述，我认为可能有以下几种原因导致轨迹回放的marker图标不准确：

1. 地图上的路线与实际路线不一致，例如道路施工、道路封闭等情况。你可以尝试在地图上手动绘制一条准确的路线，或者使用高精度地图SDK。

2. 轨迹回放的速度设置过快，导致marker图标跳过了一些关键点。你可以调整速度参数，或者采用更精细的轨迹点数据。

3. 轨迹回放的算法有误，导致marker图标未能按照路线行进。你可以检查轨迹回放算法的实现，或者使用已有的成熟轨迹回放组件。

以下是一个简单的示例，使用高德地图的轨迹回放功能：

<template>
  <div class="map-container">
    <div id="map"></div>
  </div>
</template>

<script>
import AMap from 'AMap'
import 'AMap/AMap.css'

export default {
  data() {
    return {
      map: null,
      marker: null,
      path: [], // 轨迹点数组
      playback: null, // 轨迹回放实例
    }
  },
  mounted() {
    this.initMap()
    this.initPlayback()
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = new AMap.Map('map', {
        zoom: 14,
        center: [116.39, 39.9],
      })
    },
    // 初始化轨迹回放
    initPlayback() {
      AMapUI.loadUI(['misc/PathSimplifier'], PathSimplifier => {
        const pathSimplifierIns = new PathSimplifier({
          map: this.map,
          getPath: function(pathData, pathIndex) {
            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: {
            pathLineStyle: {
              strokeStyle: '#0E9AFE',
              lineWidth: 6,
              dirArrowStyle: true,
            },
            getPathStyle: function(pathItem, zoom) {
              const color = {
                0: 'orange',
                1: 'red',
                2: 'blue',
              }[pathItem.pathData.type]
              return {
                strokeStyle: color,
                lineWidth: 6,
              }
            },
          },
        })

        this.path = [
          {
            name: '轨迹1',
            type: 0,
            path: [
              [116.39, 39.9],
              [116.4, 39.91],
              [116.41, 39.92],
              [116.42, 39.93],
            ],
          },
          {
            name: '轨迹2',
            type: 1,
            path: [
              [116.4, 39.9],
              [116.41, 39.91],
              [116.42, 39.92],
              [116.43, 39.93],
            ],
          },
        ]

        pathSimplifierIns.setData(this.path)

        this.playback = pathSimplifierIns.createPathNavigator(0, {
          loop: true,
          speed: 100, // 播放速度
          pathNavigatorStyle: {
            width: 32,
            height: 32,
            content: PathSimplifier.Render.Canvas.getImageContent(
              'https://webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/imgs/car.png',
              onload,
              onerror
            ),
            strokeStyle: null,
            fillStyle: null,
          },
        })

        this.playback.start()
      })
    },
  },
}
</script>

<style>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}
</style>

---

如果我的建议对您有帮助、请点击采纳、祝您生活愉快