Google지도에 svg 오버레이를 추가하는 방법

Question

Google지도 API를 사용하여 http://svo.aero/transport/과 같은 것을 만들고지도에 svg 오버레이를 추가하고 일부 객체에 마우스를 올려 놓으면 정보가 표시됩니다. 하지만 몇 가지 예 또는 정보를 찾을 수 없습니다 구글 맵에 svg 오버레이를 추가

Answer 1

글쎄, 그건 Google지도가 아닙니다. OpenLayers와 비슷해 보입니다 (yandex 맵은 다른 lib와 관계가 있는지 알지 못합니다). SVG 이미지를 오버레이하는 경우 OverlayView object을 사용하여 이미지를 오버레이 할 수 있습니다.

기본적으로 오버레이보기를 인스턴스화합니다. 마지막 단계에서 onAdd를 트리거 및 그릴 것

var myoverlay = new google.maps.OverlayView(); 
myoverlay.draw = function() { 
    // this will be executed whenever you change zoom level 
}; 

myoverlay.onRemove = function() { 
    // this will be executed whenever you call setMap(null) on this overlay 
}; 

myoverlay.onAdd = function() { 
    // this will be executed when you call setMap(your map) on this object 
}; 

myoverlay.setMap(map); 

그건 이렇게하려면 기본 골격은 onAdd, draw 및 onRemove 방법을 구현하는 것입니다. 무승부가지도 수명주기 동안 반복적으로 실행하는 것이기 때문에, 당신은 그것을이다

myoverlay.onAdd = function() { 
    // let's get a reference to the markerLayer mapPane, which will contain your SVG 
    var panes = this.getPanes(); 

    // create a div and append it to the markerLayer pane   
    var mydiv = document.createElement('div'); 
    panes.markerLayer.appendChild(mydiv); 

    // create an SVG element and append it to your div 
    var svgns = "http://www.w3.org/2000/svg"; 
    var mysvg = document.createElementNS(svgns, 'svg'); 
    mysvg.setAttribute('width', "100%"); 
    mysvg.setAttribute('height', "100%"); 
    ...whatever other attributes you want to add.. 
    ...whatever other child elements you want to append to your svg element 
    mydiv.appendChild(mysvg); 

}; 

당신의 SVG에 포함 코드를 넣어에서 onAdd 방법 드 사용 (그렇지 않으면, 당신은 제어하지 않고 여러 SVG 산란으로 끝낼 것) 할 것입니다. SVG는 OverlayView 내부에 추가되었으므로 원래 크기와 위치를 유지하므로 SVG가 움직이지 않거나지도와 관련이없는 배율없이 자유롭게 확대/축소 및 확대/축소 할 수 있습니다.