Google maps api 3 如何将svg覆盖添加到google地图

我想创建一些像这样的谷歌地图api，添加svg覆盖地图，当鼠标在一些对象上显示信息。但是我找不到一些示例或信息如何将svg覆盖添加到google地图中，这不是google地图。它看起来更像OpenLayers（它说yandex映射，我不知道它是否与其他库有任何关系）。按照叠加SVG图像的方式，您可以使用

基本上，您将引用OverlyView。为此，基本框架是实现

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。由于draw将在地图生命周期中重复执行，所以您可能希望使用de-onAdd方法来放置SVG包含代码（否则，您最终会在没有控制的情况下生成多个SVG）

---

就这样。由于SVG添加在覆盖视图中，因此它将保留其原始大小和位置，因此您可以自由地进行窗格和缩放，而无需SVG移动或缩放与地图无关。

您没有提到您使用的技术/CMS。如果你有一个WordPress网站，那就去看看吧——它可以完全满足你的需要。您可以获取任何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);

};