如何让Google Maps OverlayView仅SVG路径可点击？

刚好碰到过类似的场景，给你梳理下可行的解决方案！你当前遇到的问题根源在于：用<img>标签加载SVG时，浏览器会把整个img的矩形区域视为可交互区域，完全忽略SVG内部的透明部分。要实现仅SVG路径响应点击，我们需要直接在DOM中嵌入SVG元素，而不是通过img标签引用，这样就能利用SVG的pointer-events属性精准控制交互范围。

核心修改步骤 #

1. 替换<img>为内嵌SVG元素 #

你原来的代码使用img标签加载SVG，现在改成直接创建SVG元素并注入内容（可以通过AJAX加载SVG文本，或者直接把SVG代码作为字符串传入）。修改后的onAdd方法示例如下：

USGSOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.borderStyle = 'dotted';
  div.style.borderWidth = '2px';
  div.style.borderColor = 'white';
  div.style.position = 'absolute';

  // 替换img标签为内嵌SVG元素
  const svgNs = "http://www.w3.org/2000/svg";
  var svgElement = document.createElementNS(svgNs, "svg");
  // 这里替换成你的SVG内容，比如通过fetch获取后赋值，或者直接写入SVG字符串
  svgElement.innerHTML = this.svgContent_; 
  svgElement.style.width = '100%';
  svgElement.style.height = '100%';
  svgElement.style.position = 'absolute';

  div.appendChild(svgElement);
  this.div_ = div;

  // 添加到Google Maps的覆盖层和可点击面板
  const panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
  panes.overlayMouseTarget.appendChild(div);

  // 给SVG路径绑定交互事件，而非整个容器
  const pathElement = svgElement.querySelector('path');
  google.maps.event.addDomListener(pathElement, 'mouseover', function() {
    this.style.opacity = '0.5';
  });
  google.maps.event.addDomListener(pathElement, 'mouseout', function() {
    this.style.opacity = '1';
  });
};

2. 用CSS精准控制点击区域 #

添加以下CSS规则，确保只有SVG路径能响应交互：

svg {
  pointer-events: none; /* 让SVG容器本身不接收任何点击/鼠标事件 */
}
path {
  pointer-events: all; /* 仅让SVG路径接收所有交互事件 */
}

多SVG重叠场景的补充说明 #

如果你的地图上存在多个SVG覆盖层且层级有重叠，上述CSS规则就尤为关键——它能避免上层SVG的透明区域遮挡下层SVG的路径，确保只有实际的路径部分才会触发交互事件。

内容的提问来源于stack exchange，提问作者Corentin Le Fur