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

Question

用于Polygon 的Google Maps API不提供拖动方法.

什么是实现这样一个功能的有效方式(即,充分优化,以便它不会杀死一个四岁的笔记本电脑)？

谢谢!

Answer 1

我发现Google Maps V2 Polygon Implementation对我的需求非常有限,并通过创建自定义叠加来解决它.我的小组目前仍然停留在IE6上,所以我还没有迁移到谷歌地图V3 - 但是快速浏览一下这个API就可以看出你可能做的和我在V2中用V3做的类似.

基本上这个想法是:

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值转换为Pixel值.这在V3的MapCanvasProjection中可用:

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

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