如何使用 google-maps v3 使自定义叠加层可拖动答案

【问题标题】：how to make a Custom Overlays draggable using google-maps v3如何使用 google-maps v3 使自定义叠加层可拖动
【发布时间】：2010-09-07 21:36:17
【问题描述】：

标记可以拖动，因此自定义叠加层也可以拖动，

那么如何使自定义叠加层可拖动，

谢谢

【问题讨论】：

标签： google-maps draggable overlay

【解决方案1】：

我最近在一个类似的主题上整理了一个解决方案，该主题也非常适用于这个问题：

Here is the other Stack Overflow Thread Showing how to create a custom overlay in V3 with a draggable object

以下是工作示例： http://www.johnmick.net/drag-div-v3/

以下是部分来源： http://www.johnmick.net/drag-div-v3/js/main.js

要使自定义叠加层本身可拖动，使用 jQuery UI，您只需使叠加层的 div 对象可拖动，如下所示：

    CustomOverlay.prototype.onAdd = function()
    {
        var div = document.createElement("DIV");
        div.style.border = "none";
        div.style.borderWidth = "0px";
        div.style.position = "absolute";
        div.style.visibility = "visible";
        jQuery(div).draggable();   //Make the overlay itself draggable
        this.div = div;
        this.addPolygon(new google.maps.LatLng(46,0));
        this.getPanes().overlayLayer.appendChild(div);
    };

【讨论】：

但是，这个演示在 chrome 和 safari 上不能很好地工作？为什么？谢谢
嗯，这是一个我没有检查过的有趣行为 - Safari 和 Chrome 都使用 WebKit 来呈现网站，因此它们都经历了相同的行为，即拖动事件被创建的标记和谷歌捕获地图元素也是如此 - 我确信有办法对此进行调整，但目前我没有时间研究它 - 我可能会在几天内尝试再检查一下

【解决方案2】：

如果您使用的是自定义“OverlayView”，我发现添加您的可拖动对象“overlayMouseTarget”窗格将允许您捕获该对象上的鼠标事件，例如使用 jQuery UI 并将 draggable() 应用于对象。

【讨论】：

John 的代码自 2015 年 12 月 5 日起无法使用。它通过将“overlayLayer”更改为“overlayMouseTarget”来工作，代码如下：
```
this.getPanes().overlayMouseTarget.appendChild(div);
```