javascript - D3，谷歌地图，选择 d3 元素

Question

根据此示例，我正在尝试添加标记选择（即添加 .on("click"...) 到标记变量）。但是，当您将鼠标移到 google maps 画布上时，您会得到可以拖动的手，并且您不能使用它选择任何 svg 元素。

有没有办法（临时）禁用该功能，以便您可以单击 D3 元素？

Answer 1

I'm working on building a map like this right now. I haven't used Google's markers (rather d3 SVG circles) but I found mouseover/click/etc events had to be on objects in the overlayMouseTarget layer of the map:

var overlay = new google.maps.OverlayView();

overlay.onAdd = function() {

    var layer = d3.select(this.getPanes().overlayMouseTarget)
        .append("div")
        .attr("class", "providers");
             ...
}

I think the gMaps demo on d3js.org uses a different layer.

Answer 2

您可以使用 var overlay = new google.maps.OverlayView(); overlay.onAdd 函数

 overlay.onAdd = function () {
    var layer = d3.select(this.getPanes().overlayMouseTarget)
        .append("div")
        .attr("class", "stations");
   }

绘制自定义标记overlay.draw

并将overlay.setMap()我们的叠加层绑定到地图……</p>

更多信息可以在https://developers.google.com/maps/documentation/javascript/overlays找到