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

2022-01-11 00:00:00 user-interface drag-and-drop polygon google-maps javascript

Polygon 的 Google Maps API 可以不提供拖动方法.

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)?

谢谢！

推荐答案

我发现 Google Maps V2 多边形实现对我的需求非常有限，并通过创建自定义叠加层解决了这个问题.我的小组目前停留在 IE6 上，所以我还没有迁移到 Google Maps V3 - 但快速浏览一下 API 就会发现，您可能可以做与我在 V2 和 V3 中所做的类似的事情.

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.

基本上这个想法是:

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

<小时>

自定义叠加层:

Custom Overlays:

以下信息可帮助您开始制作自己的自定义叠加层:

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

http://code.google.com/apis/地图/文档/javascript/overlays.html#CustomOverlays

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

Creating your own "Dragable" Polygon Object:

完成后，您需要将自己的多边形添加到自定义叠加层，而不是使用 GPolygons.我经历了学习 SVG/VML 并编写一个库以将 SVG/VML 连接在一起的痛苦过程——你可以这样做，但我建议先尝试使用另一个库，例如 Raphaël.

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/

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

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

一旦您有一个自定义叠加层并且您可以将一些 Raphaël 对象扔到上面，最后一步是将您想要的坐标从 Lat/Lng 值转换为 Pixel 值.这在 V3 的 MapCanvasProjection 中可用:

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/地图/文档/javascript/reference.html#MapCanvasProjection

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

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.

相关文章