当用户单击地图上的任何位置时,当用户单击叠加View时,我想显示某个Infobox。
我正在为映射对象的单击事件添加一个侦听器,但是此事件仅提供了一个latlong param,似乎不足以判断覆盖图是否被击中。
google.maps.event.addDomListener(map, 'click', function(param) {
// if( an OverlayView was clicked)
// showInfoboxForOverlayView();
// else
// showStandarInfobox();
});
我知道我可以为OverlayView对象添加一个单独的侦听器,但是当我这样做时,这两个事件都会触发(一个来自OverlayView对象,一个来自MAP对象的事件)。
这就是我构造叠加视图对象的方式
var overlay = new google.maps.OverlayView();
overlay.onAdd = function () {
var layer = d3.select(this.getPanes().overlayMouseTarget).append("div").attr("class", "SvgOverlay");
var svg = layer.append("svg");
var adminDivisions = svg.append("g").attr("class", "AdminDivisions");
overlay.draw = function () {
var markerOverlay = this;
var overlayProjection = markerOverlay.getProjection();
// Turn the overlay projection into a d3 projection
var googleMapProjection = function (coordinates) {
var googleCoordinates = new google.maps.LatLng(coordinates[1] + 0.0005, coordinates[0] - 0.0006);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
}
path = d3.geo.path().projection(googleMapProjection);
adminDivisions.selectAll("path")
.data(geoJson.features)
.attr("d", path) // update existing paths
.enter().append("svg:path")
.attr("d", path);;
};
};
有什么想法?
尝试使用 cancelBubble flag from global evens 对象对象对象
event.cancelBubble = true;
应该防止第二次点击处理程序触发。
在您的OverlayView
中:
onAdd
:删除map
的侦听器,然后添加覆盖层的侦听器。
onRemove
:添加map
的侦听器并删除覆盖层的侦听器。
我不确定这是否有效。这也不是一个很容易的修复。
- 根本不使用Google Maps事件
- 为每个GEO路径添加单个事件听众 - 通过D3
.on()
方法 - 创建一个透明的
svg:rect
整个地图的大小,位于所有路径后面。订阅点击事件。这表示常规地图单击。