如何正确解析含位置信息的JSON字符串以创建Google Maps标记

看起来你遇到的这个问题挺典型的——静态硬编码数组能正常生成标记，但从JSON动态提取数据push就失效，我帮你梳理几个最可能的原因和对应的解决办法：

1. 冗余的类型转换可能导致异常 #

你写的parseFloat(Number(f.address.latitude))做了两次重复的类型转换：先把字符串转成Number，再转成Float。如果你的纬度/经度是合法的数字字符串（比如"37.328255"），直接用parseFloat(f.address.latitude)就足够了，甚至Number(f.address.latitude)也能直接使用。这种冗余转换在某些边缘场景（比如字符串带空格、包含非数字字符）下，可能会得到NaN值，而Google Maps会直接忽略包含NaN的坐标点。

修正后的push代码：

locations.push([f.restaurant_name, parseFloat(f.address.latitude), parseFloat(f.address.longitude)]);

2. 异步数据加载的时机是头号坑 #

这是最常见的问题！如果你的JSON请求是异步的（比如用fetch、axios或者jQuery的$.get），但Google Maps的标记初始化代码在请求完成前就执行了，那此时locations数组还是空的，自然不会生成任何标记。

验证方法：在push操作之后、标记初始化之前，用console.log(locations)打印数组，看看里面是否有数据。如果打印结果是空数组，那肯定是时机问题。

解决办法：把生成标记的代码放到JSON请求的回调函数里，确保数据加载完成后再执行地图标记逻辑。示例代码如下：

// 假设用fetch获取JSON数据
fetch('你的接口URL')
  .then(response => response.json())
  .then(data => {
    const locations = [];
    data.forEach(f => {
      locations.push([f.restaurant_name, parseFloat(f.address.latitude), parseFloat(f.address.longitude)]);
    });
    // 数据准备好后再初始化标记
    initMapMarkers(locations);
  });

// 单独封装标记初始化函数
function initMapMarkers(locations) {
  // 这里替换成你的Google Maps标记生成逻辑
  locations.forEach(location => {
    new google.maps.Marker({
      position: { lat: location[1], lng: location[2] },
      map: map,
      title: location[0]
    });
  });
}

3. JSON数据结构不符合预期 #

检查你的JSON响应里，address.latitude和address.longitude是否真的存在，有没有拼写错误（比如把latitude写成lat、或者longitude拼错），或者返回的是空字符串、null。这些情况都会让parseFloat得到NaN，导致标记无法生成。

验证方法：在push之前打印单个数据项，确认取值路径正确：

data.forEach(f => {
  console.log(f.address.latitude, f.address.longitude); // 查看输出是否是预期的数字字符串
  locations.push([f.restaurant_name, parseFloat(f.address.latitude), parseFloat(f.address.longitude)]);
});

如果输出是undefined、空字符串，那就是数据结构的问题，需要调整JSON接口的返回，或者修正你的取值路径。

4. 地图实例的作用域问题 #

如果你的map实例是在局部作用域里定义的，而生成标记的代码访问不到它，也会导致标记无法显示。确保map变量是全局的，或者在生成标记的函数里能正确访问到它。

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