如何从JSON提取索引值并在Google Maps绘制Polyline

嘿，这事儿不难，我来一步步给你拆解怎么做：

1. 解析JSON并提取轨迹数组 #

首先你得把拿到的JSON字符串转换成JavaScript对象，然后取出里面的Cot数组——这就是包含所有轨迹点的原始数据。

// 假设你已经通过接口或其他方式获取到了JSON数据，存在jsonStr变量中
const flightData = JSON.parse(jsonStr);
const rawCoords = flightData.Cot; // 提取出包含经纬度和时间的数组

2. 拆分经纬度坐标对 #

你提供的Cot数组是按**[纬度, 经度, 时间]**的规律每3个元素一组排列的，我们只需要前两个值来构建Polyline的路径。用一个循环就能轻松拆分：

const polylinePath = [];

// 每次循环跳过3个元素，只取每组的前两个（纬度和经度）
for (let i = 0; i < rawCoords.length; i += 3) {
  const latitude = rawCoords[i];
  const longitude = rawCoords[i + 1];
  // 转换成Google Maps需要的LatLng对象
  polylinePath.push(new google.maps.LatLng(latitude, longitude));
}

3. 创建Polyline并添加到地图 #

接下来就是把整理好的路径传给Google Maps的Polyline实例，配置好样式后添加到你的地图上：

// 假设你已经初始化了Google Maps实例，存在map变量中
const flightPolyline = new google.maps.Polyline({
  path: polylinePath,
  geodesic: true, // 让线条沿着地球曲面绘制，更准确
  strokeColor: '#2E86AB', // 自定义线条颜色
  strokeOpacity: 1.0,
  strokeWeight: 3 // 线条粗细
});

// 把Polyline添加到地图上
flightPolyline.setMap(map);

小提示 #

• 确保Google Maps JavaScript API已经正确加载，否则google.maps对象会不存在。你可以在API加载的回调函数里执行上述代码，或者用异步加载的方式确保API就绪。
• 如果需要用到每组的第三个时间值，可以在循环里把它存下来做额外处理（比如显示轨迹时间戳），但Polyline本身不需要这个数据。

内容的提问来源于stack exchange，提问作者kdawg