我有一个带有多个 SVG 叠加层的 Google map 。但是当我在这些 SVG 上添加点击事件时,所有叠加层都是可点击的,我希望它仅适用于 SVG 路径。
这是一个 fiddle https://jsfiddle.net/gmkfhr9s/1/
我使用自定义覆盖文档作为基础 https://developers.google.com/maps/documentation/javascript/customoverlays
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';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
//add element to clickable layer
this.getPanes().overlayMouseTarget.appendChild(div);
google.maps.event.addDomListener(img, 'mouseover', function() {
img.style.opacity = '0.5';
});
google.maps.event.addDomListener(img, 'mouseout', function() {
img.style.opacity = '1';
});
};
您可以看到,通过鼠标悬停事件,所有叠加层(带边框的框)都被选中,而且只有 SVG。
是否可以只使 SVG 可点击?
这thread是一个类似的问题,如果这可以帮助你。
编辑:
@Sphinxxx 的回答很有效。
我只想补充一点,如果您有多个 SVG,其中一些位于其他之上,则必须添加此 CSS 才能点击它们。
svg {
pointer-events: none;
}
path {
pointer-events: all;
}
最佳答案
首先要控制SVG的内部<path>
如果您需要 SVG 元素本身,则无法通过具有外部 SVG url 的图像访问它们。
一旦您拥有 SVG 元素(最简单的方法是在您的 HTML 中包含 SVG 标记),这篇文章提供了一个很好的示例来说明如何将该 SVG 用作 map 叠加层:http://serversideguy.com/2017/10/31/how-do-i-place-svgs-on-a-google-map-using-custom-overlays/
我在这里做了一个完整的例子:https://codepen.io/Sphinxxxx/pen/wjEyMm
/**
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';
}
关于javascript - 谷歌地图 OverlayView : make only SVG clickable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50327032/