Javascript Google Maps OverlayView：仅使SVG可点击

我有一个带有多个SVG覆盖的Google地图。但是当我在这些SVG上添加一个点击事件时，所有的覆盖都是可点击的，我希望它只对SVG路径起作用

这是一把小提琴

我使用自定义覆盖图文档作为基础

您可以看到，在mouseover事件中，所有的覆盖（带边框的框）都被选中，并且只有SVG

是否可以仅使SVG可单击

这是一个类似的问题，如果这可以帮助你

---

编辑：

@斯芬XXX的答案很有效

我只想补充一点，如果你有多个SVG，其中一些SVG在其他SVG之上，你必须添加这个CSS才能点击它们

svg {
  pointer-events: none;
}
path {
  pointer-events: all;
}

---

首先，要控制SVG的内部

s，您需要SVG元素本身，不能通过带有外部SVG url的图像访问它们

一旦有了SVG元素（最简单的方法是在HTML中包含SVG标记），本文提供了一个关于如何将SVG用作地图覆盖的好例子：

我在这里举了一个完整的例子：

svg {
  pointer-events: none;
}
path {
  pointer-events: all;
}

/**
    Will be called when the map is ready for the overlay to be attached.
*/
onAdd() {
    const svg = this.svg;
    svg.style.position = 'absolute';

    //Add the SVG element to a map pane/layer that is able to receive mouse events:
    const panes = super.getPanes();
    panes.overlayMouseTarget.appendChild(svg);
}

/**
    Whenever we need to (re)draw the overlay on the map, including when first added.
*/
draw() {
    //Here, we need to find the correct on-screen position for our image.
    //To achieve that, we simply ask the map's projection to calculate viewport pixels from the image's lat/lng bounds:
    const projection = super.getProjection(),
          bounds = this.bounds,
          sw = projection.fromLatLngToDivPixel(bounds.getSouthWest()),
          ne = projection.fromLatLngToDivPixel(bounds.getNorthEast());

    //Place/resize the SVG element:
    const s = this.svg.style;
    s.left = sw.x + 'px';
    s.top  = ne.y + 'px';
    s.width  = (ne.x - sw.x) + 'px';
    s.height = (sw.y - ne.y) + 'px';
}