javascript - 使用 Google Maps v3 拖动(移动)多边形

Question

Google Maps API对于多边形不提供拖动方法。

什么是实现此类功能的有效方法(即，充分优化以使其不会杀死一台使用了 4 年的笔记本电脑)？

谢谢!

Answer 1

我发现 Google Maps V2 Polygon Implementation 对我的需求非常有限，因此通过创建自定义叠加层解决了这个问题。我的小组目前停留在 IE6 上，所以我还没有迁移到 Google Maps V3 - 但快速浏览一下 API 表明您可能可以使用 V3 执行与我在 V2 中执行的类似操作。

基本上这个想法是:

1. 创建自定义叠加层
2. 用您自己的 SVG/VML 多边形填充它，并将拖动事件附加到此自定义多边形对象

---

自定义叠加层:

这里有一些信息可以帮助您开始制作自己的自定义叠加层:

http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

---

创建您自己的“可拖动”多边形对象:

一旦你了解了它，你就会想要将你自己的多边形添加到自定义叠加层而不是使用 GPolygons。我经历了学习 SVG/VML 和编写库以将 SVG/VML 桥接在一起的痛苦过程 - 你可以做到这一点，但我建议先尝试使用另一个库，例如 Raphaël。

http://raphaeljs.com/

使用 Raphaël 将为您节省大量时间来弄清楚如何获得跨浏览器矢量图形(多边形)功能 - 最重要的是它已经支持拖动事件，这是他们库中的一个示例:

http://raphaeljs.com/graffle.html

在您拥有自定义叠加层并且能够将一些 Raphaël 对象放到其上之后，最后一步是将您想要的坐标从 Lat/Lng 值转换为像素值。这在 V3 的 MapCanvasProjection 中可用:

http://code.google.com/apis/maps/documentation/javascript/reference.html#MapCanvasProjection

您可以使用 fromLatLngToDivPixel 来确定 Raphael 多边形上的点的实际像素值，绘制它，然后使用拖动事件将其添加到叠加层。