基于JSON经纬度数据通过Google Maps API动态生成Polyline失败求助

我之前也踩过类似的坑，动态加载JSON坐标生成折线却看不到，通常是几个细节没处理好，咱们逐个排查：

1. 先确认JSON坐标的格式转换是否正确 #

Google Maps的Polyline接受两种坐标格式：google.maps.LatLng对象，或者{lat: 数值, lng: 数值}的字面量对象。如果你直接把JSON里的原始坐标数组丢进去，大概率会失效。

举个例子，假设你的JSON数据是这样：

{
  "route": [
    {"latitude": 37.7749, "longitude": -122.4194},
    {"latitude": 34.0522, "longitude": -118.2437}
  ]
}

那转换代码得写成这样：

// 把JSON里的坐标转成Polyline能识别的格式
const convertedPath = jsonData.route.map(point => {
  return { lat: point.latitude, lng: point.longitude };
  // 或者用 new google.maps.LatLng(point.latitude, point.longitude)
});

转换完可以在控制台打印convertedPath，看看每个元素的格式是不是符合要求。

2. 别忘了把Polyline绑定到地图实例上 #

这是最容易忽略的点！如果创建Polyline时没指定map属性，也没后续调用polyline.setMap(map)，折线就不会被渲染到地图上。

正确的初始化代码应该是这样：

// 假设你已经初始化了map实例
const polyline = new google.maps.Polyline({
  path: convertedPath,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2,
  map: map // 关键：把折线关联到你的地图实例
});

// 或者如果创建时没指定，后续补上：
// polyline.setMap(map);

3. 检查坐标的有效性 #

如果JSON里的纬度不在-90~90之间，经度不在-180~180之间，Polyline会直接跳过无效坐标，甚至整个折线都不显示。可以在转换后打印坐标值，确认没有异常数值。

4. 确保代码在地图加载完成后执行 #

如果你的JSON读取和折线生成代码跑在地图初始化之前，那时候map实例还不存在，自然没法绑定折线。最好把逻辑放在官方推荐的initMap函数里，或者用监听事件确保地图加载完成：

function initMap() {
  // 初始化地图
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: { lat: 37.0902, lng: -95.7129 }
  });

  // 在这里写读取JSON、生成折线的代码
}

// 等待Google Maps脚本加载完成后执行初始化
google.maps.event.addDomListener(window, 'load', initMap);

5. 排查JSON请求是否成功 #

如果是从外部加载JSON，要确认请求有没有跨域问题，或者JSON文件路径是否正确。打开浏览器控制台的Network标签，看看JSON请求的状态码是不是200，Response里有没有拿到预期的数据。

给你一个完整的可参考示例 #

function initMap() {
  // 初始化地图
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: { lat: 37.0902, lng: -95.7129 }
  });

  // 加载JSON坐标数据（实际项目替换成你的接口地址）
  fetch('./route-coordinates.json')
    .then(res => res.json())
    .then(data => {
      // 转换坐标格式
      const path = data.route.map(point => ({
        lat: point.latitude,
        lng: point.longitude
      }));

      // 创建并添加折线到地图
      const polyline = new google.maps.Polyline({
        path: path,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });

      // 可选：让地图自动适配折线的范围
      const bounds = new google.maps.LatLngBounds();
      path.forEach(coord => bounds.extend(coord));
      map.fitBounds(bounds);
    })
    .catch(err => console.error('加载坐标数据失败：', err));
}

google.maps.event.addDomListener(window, 'load', initMap);

你可以对照上面的步骤，先从控制台打印关键数据开始排查，应该能很快找到问题所在。

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