如何添加svg覆蓋谷歌地圖

Question

我想創建一些這樣的谷歌地圖api http://svo.aero/transport/，添加svg覆蓋地圖和鼠標上的某些對象顯示信息。但我找不到一些例子或信息如何添加svg覆蓋谷歌地圖

Answer 1

那麼，這不是谷歌地圖。它看起來更像OpenLayers（它說yandex地圖，我不知道它是否與其他lib有任何關係）。根據覆蓋SVG圖像，您可以使用OverlayView object。

基本上你會實例一個OverlayView。要做到這一點，基本骨架是實施onAdd，draw和onRemove方法：

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和借鑑。由於抽籤將地圖生命週期中重複執行，你會想使用去使用onAdd方法把你的SVG包含的代碼（否則，你會與幾個SVG產卵結束了無控制）

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是在OverlayView中添加的，因此它將保留其原始大小和位置，因此您可以自由地進行窗格和縮放，而無需使用svg四處移動或與地圖無關的縮放。