如何在@react-google-maps/api中模拟点击自定义GeoJSON图层？

已加载带有自定义GeoJSON的Google地图，该GeoJSON图层设置z-index: 1并绑定了可读取要素的onclick函数，正常点击时图层的点击函数能正常触发。现在需要实现：用户输入地址后，导航至该地址并加载GeoJSON中对应位置的要素数据。尝试使用以下代码触发点击事件，但仅触发了地图自身的onclick，未触发GeoJSON图层的点击函数：

google.maps.event.trigger( mapRef.current, 'click', {
  latLng: address.coordinate
});

直接触发地图的click事件无法关联到GeoJSON图层，推荐两种更可靠的实现方式：

方法一：直接根据坐标查找GeoJSON要素并调用处理函数 #

跳过模拟点击的步骤，直接根据目标坐标遍历GeoJSON要素，找到匹配项后调用原本的图层点击处理逻辑，这是最稳定的方案。

假设你原本的GeoJSON图层点击处理函数是onGeoJsonClick，代码示例如下：

// 原图层点击处理函数
function onGeoJsonClick(event) {
  // 这里是你原本处理要素的逻辑，比如加载对应数据
  console.log("加载要素数据:", event.feature);
}
// 绑定图层点击事件
geoJsonLayer.addListener('click', onGeoJsonClick);

// 地址定位后的处理逻辑
function handleAddressNavigate(address) {
  const targetLatLng = address.coordinate; // 假设是google.maps.LatLng对象
  
  // 遍历GeoJSON图层的所有要素
  geoJsonLayer.data.forEach(feature => {
    const geometry = feature.getGeometry();
    let isMatch = false;

    // 根据要素的几何类型判断坐标是否匹配
    switch(geometry.getType()) {
      case 'Point':
        // 计算坐标与点要素的距离，小于10米视为匹配（可调整阈值）
        const distance = google.maps.geometry.spherical.computeDistanceBetween(targetLatLng, geometry.get());
        isMatch = distance < 10;
        break;
      case 'Polygon':
        // 判断坐标是否在多边形内部
        isMatch = google.maps.geometry.poly.containsLocation(targetLatLng, geometry);
        break;
      case 'MultiPolygon':
        // 处理多多边形，遍历每个子多边形判断
        const polygons = geometry.getArray();
        for(const poly of polygons) {
          if(google.maps.geometry.poly.containsLocation(targetLatLng, poly)) {
            isMatch = true;
            break;
          }
        }
        break;
      // 可根据你的GeoJSON几何类型扩展其他情况
    }

    if(isMatch) {
      // 调用原处理函数，传入模拟的event对象
      onGeoJsonClick({ feature: feature, latLng: targetLatLng });
      return; // 找到第一个匹配项后停止遍历
    }
  });
}

方法二：直接触发GeoJSON图层的click事件（不推荐） #

如果一定要模拟图层的点击事件，需要先找到对应坐标的要素，再触发图层的click事件并传入包含要素的参数。但这种方式依赖Google Maps内部实现，可能在版本更新后失效：

function triggerGeoJsonLayerClick(address) {
  const targetLatLng = address.coordinate;
  let targetFeature = null;

  // 先找到匹配的要素（逻辑同方法一）
  geoJsonLayer.data.forEach(feature => {
    // ... 省略判断匹配的逻辑，同方法一
    if(isMatch) {
      targetFeature = feature;
      return;
    }
  });

  if(targetFeature) {
    // 触发GeoJSON图层的click事件
    google.maps.event.trigger(geoJsonLayer, 'click', {
      latLng: targetLatLng,
      feature: targetFeature
    });
  }
}

推荐使用方法一，逻辑更清晰且不依赖内部实现，稳定性更高。

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