高德地图 JS API 之轨迹回放：用原生 JS 在网页实现轨迹回放功能

前端

2023-10-14 04:37:51

高德地图上实现轨迹回放功能：分步指南

背景介绍

轨迹回放是一项强大的功能，可用于创建各种地图应用，例如显示车辆或行人轨迹。本文将指导您使用原生 JS 在高德地图上实现轨迹回放，并实时更新坐标详细信息。

步骤 1：准备工作

在开始之前，您需要准备以下内容：

高德地图 API Key：从高德地图官网注册并获取 API Key。
高德地图 JS API 库：从高德地图官网下载 JS API 库。
HTML 文件：用于编写代码并显示地图。

步骤 2：初始化地图

在 HTML 文件中，引入高德地图 JS API 库并初始化地图：

<script src="http://webapi.amap.com/maps?v=1.4.15&key=您的API Key"></script>
<div id="map" style="width: 100%; height: 500px;"></div>

步骤 3：加载轨迹数据

接下来，将轨迹数据加载到 JavaScript 对象中。轨迹数据可以采用 JSON 格式或其他格式：

var trajectoryData = [
  {
    longitude: 116.480976,
    latitude: 39.989642,
    time: "2023-03-08 12:00:00"
  },
  {
    longitude: 116.481076,
    latitude: 39.989742,
    time: "2023-03-08 12:00:05"
  },
  // ...
];

步骤 4：创建轨迹回放对象

使用高德地图 JS API 创建一个轨迹回放对象：

var trajectoryReplay = new AMap.Map.Polyline({
  path: trajectoryData,
  strokeColor: "#FF0000",
  strokeWeight: 5,
  showDir: true
});

path：轨迹数据
strokeColor：轨迹颜色
strokeWeight：轨迹宽度
showDir：是否显示轨迹方向

步骤 5：将轨迹回放对象添加到地图

trajectoryReplay.setMap(map);

步骤 6：开始轨迹回放

trajectoryReplay.start();

步骤 7：实时更新坐标信息

通过监听轨迹回放对象的 move 事件实时更新坐标信息：

trajectoryReplay.on('move', function(event) {
  var currentCoordinate = event.target.get('position');
  // 更新坐标信息
});

步骤 8：添加信息弹窗

为用户提供坐标信息的直观视图，添加一个信息弹窗：

var infoWindow = new AMap.InfoWindow({
  offset: new AMap.Pixel(0, -30)
});

trajectoryReplay.on('move', function(event) {
  var currentCoordinate = event.target.get('position');
  infoWindow.setPosition(currentCoordinate);
  infoWindow.setContent(`经度：${currentCoordinate.lng}<br>纬度：${currentCoordinate.lat}<br>时间：${event.target.getAttr('time')}`);
  infoWindow.open(map);
});