求助：在Google Map窗口展示本地JSON文件无数据显示问题

我来帮你排查这个问题！你已经能创建标记和信息窗口，说明Google Maps的基础调用和本地服务器配置大概率是没问题的，核心问题应该出在JSON数据的读取、解析或者传递到信息窗口的环节上。下面给你一步步的排查和解决思路：

1. 先确认JSON文件本身的可用性 #

首先在浏览器地址栏直接访问你的JSON文件路径，比如 http://localhost/your-data.json：

• 如果能看到格式正确的JSON内容，说明文件路径和服务器配置没问题；
• 如果出现404错误，检查文件是否放在本地服务器的根目录（或者对应路径下），文件名和路径有没有拼写错误；
• 如果显示乱码或者语法错误（比如逗号漏写、引号不匹配），先修复JSON的语法问题——JSON对格式要求很严格，哪怕一个多余的逗号都会导致解析失败。

2. 给$.getJSON加上错误处理，排查请求问题 #

很多时候请求失败但你没看到错误信息，给请求加上.fail()回调，能直接在Chrome控制台看到问题：

$.getJSON('./your-data.json')
  .done(function(data) {
    // 成功拿到数据后的逻辑
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log('JSON请求出错:', textStatus, errorThrown);
  });

打开Chrome控制台（F12），查看打印的错误：

• 如果是parsererror，说明JSON格式有问题；
• 如果是error或者not found，检查文件路径是否正确。

3. 确认数据解析和信息窗口的绑定逻辑 #

拿到数据后，要确保你正确遍历了数据结构，并且字段名完全匹配：

• 先在.done()回调里加console.log(data)，看看控制台打印的是不是你预期的数组/对象结构；
• 如果是数组，要用$.each(data, function(index, item) { ... })遍历；如果是对象，要对应访问它的属性；
• 创建信息窗口时，确保引用的字段名和JSON里的一致（注意大小写！比如JSON里是"locationName"，你不能写成"locationname"）。

完整示例代码参考 #

下面是一个能跑通的极简示例，你可以对照调整自己的代码：

<div id="map" style="width: 800px; height: 600px;"></div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
function initMap() {
  // 初始化地图
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 31.2304, lng: 121.4737} // 以上海为例
  });

  // 读取本地JSON数据
  $.getJSON('./locations.json')
    .done(function(data) {
      console.log('获取到的数据:', data); // 调试用，确认数据结构
      
      // 遍历数据创建标记和信息窗口
      $.each(data, function(i, loc) {
        const marker = new google.maps.Marker({
          position: {lat: loc.lat, lng: loc.lng},
          map: map
        });

        // 创建信息窗口内容
        const infowindow = new google.maps.InfoWindow({
          content: `<div>
                      <h4>${loc.name}</h4>
                      <p>${loc.address}</p>
                    </div>`
        });

        // 绑定标记点击事件
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      });
    })
    .fail(function(jqXHR, textStatus, error) {
      console.error('请求失败:', textStatus, error);
    });
}
</script>
<!-- 替换成你自己的Google Maps API密钥 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

对应的locations.json格式示例：

[
  {"name": "外滩", "lat": 31.2304, "lng": 121.4737, "address": "上海市黄浦区中山东一路"},
  {"name": "东方明珠", "lat": 31.2396, "lng": 121.5104, "address": "上海市浦东新区世纪大道1号"}
]

最后提醒 #

• 一定要替换示例中的YOUR_API_KEY为你自己的Google Maps API密钥；
• 确保本地服务器正常运行（比如用Python的python -m http.server或者Node.js的http-server），不要直接打开本地HTML文件（Chrome的本地文件协议会限制AJAX请求）。

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