求助：如何为Google Maps GeoJSON标记添加信息窗口展示陨石数据

看起来你离成功只差几步啦！我帮你梳理下代码里的问题，然后给出修正后的版本：

问题分析 #

• infowindow未初始化：你直接调用了infowindow.setPosition()但没有先创建google.maps.InfoWindow实例，浏览器会报错找不到这个变量。
• information函数未执行：你的点击监听逻辑写在这个函数里，但代码里没有调用它，所以事件根本没绑定上。
• HTML实体错误：代码里的"id"是HTML转义后的双引号，在JS里直接用普通双引号"id"就行。
• 未拼接多属性内容：你需要把质量、ID、位置这些属性组合成信息窗口的内容。

修正后的完整代码 #

var map;
// 先声明并初始化信息窗口实例
var infowindow = new google.maps.InfoWindow();

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 45, lng: -1}
  });

  // 加载GeoJSON后直接绑定点击事件，逻辑更简洁
  map.data.loadGeoJson('Meteorite.geojson', {}, function() {
    // GeoJSON加载完成后添加点击监听
    map.data.addListener('click', function(e) {
      // 获取陨石的各个属性（根据你的GeoJSON实际字段名调整）
      var meteoriteId = e.feature.getProperty("id");
      var meteoriteMass = e.feature.getProperty("mass");
      var position = e.feature.getGeometry().get(); // 获取坐标点

      // 拼接信息窗口内容，用模板字符串更易读
      var content = `
        <div>
          <h3>陨石ID: ${meteoriteId}</h3>
          <p>质量: ${meteoriteMass ? meteoriteMass + ' g' : '未知'}</p>
          <p>位置: ${position.lat().toFixed(4)}, ${position.lng().toFixed(4)}</p>
        </div>
      `;

      // 设置信息窗口位置和内容，然后打开
      infowindow.setPosition(position);
      infowindow.setContent(content);
      infowindow.open(map);
    });
  });
}

关键说明 #

• 我把点击事件的监听逻辑整合到了initMap里，并且放在loadGeoJson的回调函数中，确保GeoJSON加载完成后再绑定事件，避免出现元素未加载就绑定的问题。
• 初始化了全局的infowindow实例，复用同一个窗口比每次点击创建新窗口更高效。
• 用模板字符串拼接了多属性内容，你可以根据自己GeoJSON里的实际字段名调整（比如如果质量字段是mass_g，就改成e.feature.getProperty("mass_g")）。
• 处理了属性可能为空的情况（比如质量未知时显示“未知”），提升用户体验。

如果你的GeoJSON里的位置字段不是点类型，或者字段名不同，只需要对应调整getProperty和getGeometry的部分就行~

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