地图轨迹回放时如何让车辆图标始终朝向行进方向？

Prog.柯佳提问于 2026-03-11 12:12:21 阅读 7

交互

我在用高德地图 JS API 做轨迹回放功能，现在能正常移动 marker，但车辆图标一直是固定朝上的，看起来很不真实。我尝试根据前后两个坐标点计算角度，然后通过 setRotation 设置旋转，但图标在地图缩放或倾斜后方向就乱了。

是不是需要考虑地图的投影或者视角？下面是我目前设置图标的 CSS 样式：

.car-marker {
  width: 32px;
  height: 32px;
  background-image: url('./car-icon.png');
  background-size: contain;
  transform-origin: center;
}

有没有人遇到过类似问题？高德的 Marker 旋转是基于屏幕还是地图坐标系啊？

地图应用轨迹回放

我来解答赞 2 收藏

反馈

1 条解答

♫艳兵 Lv1

高德的 setRotation 是基于屏幕方位的，地图倾斜时确实会乱。解决方法是用 setAngle 代替 setRotation，并在设置角度时减去地图的 pitch 值：

// 计算两点角度

function getAngle(from, to) {

  const dx = to.getLng() - from.getLng();

  const dy = to.getLat() - from.getLat();  let angle = Math.atan2(dy, dx) * 180 / Math.PI;

  return angle;

}



// 更新 marker 方向

function updateMarkerAngle(marker, prevPos, currPos) {

  const map = marker.getMap();

  const pitch = map.getPitch() || 0; // 获取地图倾斜角度

  const angle = getAngle(prevPos, currPos);

  marker.setAngle(angle - pitch); // 减去 pitch 修正

}

简单说就是：角度减去地图倾斜角度，就能让图标在倾斜视角下也朝向正确方向。

2026-03-11 12:17