Question

我希望使用google map api创建类似此http://svo.aero/transport/的内容，将svg overlay添加到地图以及鼠标在某些对象上显示信息时。但我无法找到一些示例或信息如何将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和draw。由于绘制将在地图生命周期中重复执行，因此您需要使用de 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四处移动或缩放与地图无关。

Answer 2

您没有提及您使用的技术/ CMS。如果您有WordPress网站，请查看MapSVG-它可以完全满足您的需求。您可以获取任何SVG文件，将其叠加在Google Map上并使其可单击。

如何将svg叠加添加到谷歌地图

2 个答案: