Google Maps loadGeoJson点击功能失效，如何解决？

一、让点击功能正常生效 #

你已设置clickable: true，但缺少点击事件监听逻辑，同时需确保样式正确应用到所有加载的要素。以下是修正要点：

1. 确保样式全局覆盖
   改用回调式设置样式，能保证每个加载的GeoJSON要素都应用正确配置，替换你最后全局设置样式的代码：

   map.data.setStyle(function(feature) {
     return {
       fillColor: "green",
       strokeWeight: 1,
       clickable: true
     };
   });
   

2. 添加点击事件监听
   必须给map.data绑定click事件才能响应点击操作，示例如下：

   map.data.addListener('click', function(event) {
     // event.feature 即为被点击的GeoJSON要素
     console.log('点击的要素:', event.feature);
     // 可在此添加业务逻辑，比如弹窗展示要素属性
     if (event.feature.getProperty('name')) {
       alert('点击了：' + event.feature.getProperty('name'));
     }
   });
   

二、仅针对loadGeoJson加载的图层触发点击事件 #

若地图存在其他图层（如自定义Marker），或需区分不同GeoJSON来源的要素，可通过以下方式实现：

1. 给加载的要素添加来源标记
   在每个loadGeoJson的回调函数中，为要素添加自定义属性标记来源：

   map.data.loadGeoJson(permits, null, function() {
     var bounds = new google.maps.LatLngBounds();
     map.data.forEach(function(feature) {
       feature.setProperty('source', 'permits'); // 标记来源为permits
       var geo = feature.getGeometry();
       geo.forEachLatLng(function(LatLng) {
         bounds.extend(LatLng);
       });
     });
     map.fitBounds(bounds);
     map.setCenter(bounds.getCenter());
     map.setZoom(18);
   });
   
   map.data.loadGeoJson(faylar, null, function() {
     var bounds = new google.maps.LatLngBounds();
     map.data.forEach(function(feature) {
       feature.setProperty('source', 'faylar'); // 标记来源为faylar
       var geo = feature.getGeometry();
       geo.forEachLatLng(function(LatLng) {
         bounds.extend(LatLng);
       });
     });
   });
   

2. 在点击事件中过滤目标要素
   在click事件监听内，通过自定义属性判断是否为目标图层的要素：

   map.data.addListener('click', function(event) {
     var source = event.feature.getProperty('source');
     // 仅响应permits或faylar加载的要素
     if (source === 'permits' || source === 'faylar') {
       console.log('点击了目标图层要素:', event.feature);
       // 执行你的业务逻辑
     }
   });
   

完整修正代码示例 #

map.data.loadGeoJson(permits, null, function() {
  var bounds = new google.maps.LatLngBounds();
  map.data.forEach(function(feature) {
    feature.setProperty('source', 'permits');
    var geo = feature.getGeometry();
    geo.forEachLatLng(function(LatLng) {
      bounds.extend(LatLng);
    });
  });
  map.fitBounds(bounds);
  map.setCenter(bounds.getCenter());
  map.setZoom(18);
});

var Fay = "/" + "Faylar.json";
var faylar = Fay;

map.data.loadGeoJson(faylar, null, function() {
  var bounds = new google.maps.LatLngBounds();
  map.data.forEach(function(feature) {
    feature.setProperty('source', 'faylar');
    var geo = feature.getGeometry();
    geo.forEachLatLng(function(LatLng) {
      bounds.extend(LatLng);
    });
  });
});

// 回调式设置样式
map.data.setStyle(function(feature) {
  return {
    fillColor: "green",
    strokeWeight: 1,
    clickable: true
  };
});

// 带过滤的点击事件监听
map.data.addListener('click', function(event) {
  var source = event.feature.getProperty('source');
  if (source && (source === 'permits' || source === 'faylar')) {
    console.log('要素属性:', event.feature.getProperties());
    // 此处添加交互逻辑
  }
});

关键注意事项 #

• loadGeoJson是异步操作，必须在回调函数内处理要素属性设置，才能保证所有加载的要素都被标记。
• 若无需区分不同GeoJSON来源，直接绑定map.data的click事件即可，因为map.data默认仅包含通过loadGeoJson加载的要素（除非手动添加了其他要素）。

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