使用Google Maps v3拖动（移动）多边形 [英] Drag (move) a polygon using Google Maps v3

问题描述

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

实现这样一个功能（即，充分优化，不会杀死一个四岁的笔记本电脑）是一种有效的方式， ？

谢谢！

解决方案

我发现Google Maps V2多边形实现对于我已经通过创建自定义叠加层的需求非常有限。我的小组目前停留在IE6上，所以我还没有迁移到Google Maps 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将为您节省很多时间，以了解如何获取跨浏览器矢量图形（Polygon）功能 - 最重要的是它已经支持拖动事件，这里是他们的库中的一个例子： / p>

http://raphaeljs.com/graffle.html

一旦你有一个自定义叠加层，你可以把一些Raphaël对象放在它上面，最后一步是从Lat / Lng值转换你想要的坐标到像素值。这可以在V3的MapCanvasProjection中找到：

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

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

The Google Maps API for a Polygon does not offer a drag method.

What would be an efficient way of implementing such a feature (i.e., sufficiently optimised so that it would not kill a four year old laptop)?

Thank you!

解决方案

I found the Google Maps V2 Polygon Implementation to be very limiting for the needs I have had and solved it by creating a custom overlay. My group is currently stuck on IE6 so I have yet to migrate over to Google Maps V3 - but taking a quick look at the API shows that you could probably do a similar thing that I did in V2 with V3.

Essentially the idea is:

1. Create a Custom Overlay
2. Populate it with your own SVG/VML Polygons and attach a drag event to this custom polygon object

---

Custom Overlays:

Here is some information to get you started on making your own custom overlay:

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

---

Creating your own "Dragable" Polygon Object:

Once you get that down you'll want to add your own polygons to the custom overlay instead of using GPolygons. I went through the painful process of learning SVG/VML and writing a library to bridge SVG/VML together - you could do that, but I would recommend starting by trying to use another library such as Raphaël.

http://raphaeljs.com/

Using Raphaël will save you a whole lot of time trying to figure out how to get cross-browser Vector Graphic (Polygon) functionality - and best of all it supports drag events already, here is an example from their library:

http://raphaeljs.com/graffle.html

Once you have a custom overlay and you are able to throw some Raphaël objects onto it the last step is to translate the coordinates you want from a Lat/Lng value to a Pixel value. This is available in the MapCanvasProjection of V3:

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

You can use fromLatLngToDivPixel to figure out what the actual pixel values are for the points on your Raphael polygon, draw it, then add it to the overlay with a drag event.

这篇关于使用Google Maps v3拖动（移动）多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！