D3 요소를 선택하는 D3 Google지도

Question

이 example에 따라 마커 변수에 .on ("click"...을 추가) 마커 선택을 추가하려고합니다. 그러나 마우스를 Google지도 캔버스 위로 가져 가면 드래그 할 수있는 손이 생기고 그 곳에서 svg 요소를 선택할 수 없습니다.

D3 요소를 클릭 할 수 있도록 해당 기능을 (임시로) 비활성화 할 수 있습니까?

Answer 1

저는 지금 이와 같은지도를 작성 중입니다. 나는 구글의 마커 (오히려 D3 SVG 원)를 사용하지 않은하지만 난 마우스 오버/클릭 발견/등 이벤트는지도의 overlayMouseTarget 층에있는 개체에 있어야했다 :

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

overlay.onAdd = function() { 

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

내가 d3js에 gMaps 데모를 생각합니다. org는 다른 레이어를 사용합니다.

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() 무승부 ...

더 많은 정보가 https://developers.google.com/maps/documentation/javascript/overlays