为多个GeoJSON对象添加点击监听器的JavaScript技术问题

首先，你的核心需求是给每个添加的GeoJson图形绑定对应shapes[i]的相关数据，点击时展示这些数据。这里有个关键优化点：不要在循环里给每个图形单独加监听器，而是利用Data层的特性，把数据附加到Feature上，再通过全局的点击监听器获取数据，这样更高效也更易维护。

具体实现步骤 #

1. 处理循环闭包问题，绑定对应数据到Feature
   在循环中添加GeoJson时，通过addGeoJson()返回的Feature数组，把当前shapes[i]的数据设置为Feature的属性。这里要注意循环变量的闭坑——如果直接用var i，所有Feature会绑定最后一条数据，所以可以用立即执行函数或者ES6的let来解决：

   var newData = new google.maps.Data({ map: map, style: map.data.getStyle() }); 
   
   // 给整个Data层添加全局点击监听器
   google.maps.event.addListener(newData, 'click', function (event) {
     // 获取绑定的相关数据
     var relatedData = event.feature.getProperty('relatedData');
     // 这里可以根据需求自定义展示逻辑，比如弹窗或信息窗口
     alert("点击的图形相关数据：" + JSON.stringify(relatedData));
   });
   
   for (var i = 0; i < shapes.length; i++) { 
     // 用立即执行函数保存当前循环索引，避免闭包问题
     (function(index) {
       var userObject = JSON.parse(shapes[index].area); 
       // 添加GeoJson并获取返回的Feature数组
       var addedFeatures = newData.addGeoJson(userObject); 
       // 给每个Feature绑定对应的shapes数据
       addedFeatures.forEach(function(feature) {
         feature.setProperty('relatedData', shapes[index]);
       });
     })(i);
   } 
   
   map.data.setMap(null); 
   map.data = newData;
   

   如果你的环境支持ES6，也可以简化成这样（把var i改成let i即可自动保存当前索引）：

   for (let i = 0; i < shapes.length; i++) { 
     var userObject = JSON.parse(shapes[i].area); 
     var addedFeatures = newData.addGeoJson(userObject); 
     addedFeatures.forEach(function(feature) {
       feature.setProperty('relatedData', shapes[i]);
     });
   }
   

2. 关于GeoJson转多边形的疑问
   其实你完全不需要手动转换！addGeoJson()方法会自动把GeoJson格式的几何数据转换成Google Maps对应的几何对象（比如Polygon、Point、LineString等），并封装成Feature对象。你只需要通过Feature的属性来绑定和获取数据就够了。

进阶优化：用自定义信息窗口展示数据 #

如果觉得alert不够友好，可以换成Google Maps自带的信息窗口来展示更丰富的内容：

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(newData, 'click', function (event) {
  var relatedData = event.feature.getProperty('relatedData');
  // 自定义信息窗口内容
  infoWindow.setContent(`
    <div style="padding: 8px;">
      <h4>图形信息</h4>
      <p>ID：${relatedData.id}</p>
      <p>描述：${relatedData.description}</p>
    </div>
  `);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
});

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