Как добавить наложение svg на карту google

Question

Я хочу создать что-то вроде этого http://svo.aero/transport/ с google map api, добавить svg overlay для отображения и когда мышь на каком-либо объекте покажет информацию. Но я не могу найти некоторые примеры или информацию о том, как добавить svg overlay в google map

Answer 1

Ну, это не карты Google. Он больше похож на 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 или масштабирования, не связанных с картой.