使用Google Maps v3拖動（移動）多邊形

Question

Polygon的Google Maps API不提供拖動方法。

什麼是實現這種功能的有效方式（即充分優化以使其不會殺死四年前的筆記本電腦）？

謝謝！

Answer 1

我發現Google Maps V2多邊形實現對我的需求非常有限，並通過創建自定義疊加層來解決它。我的小組目前停留在IE6上，因此我還沒有遷移到Google Maps V3--但快速查看API顯示，您可能做了類似的事情，我在V2中使用V3做了類似的事情。

本質的理念是：

1. 創建自定義疊加
2. 用自己的SVG/VML多邊形填充它，然後拖拽事件附加到這個自定義多邊形對象

---

自定義覆蓋圖：

以下是一些可幫助您開始製作自己的信息[R自定義的疊加：

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

---

創建自己的「Dragable」多邊形對象：

一旦你下來，你會希望自己的多邊形添加到自定義覆蓋，而不是使用GPolygons。我經歷了學習SVG/VML和編寫一個將SVG/VML連接在一起的庫的痛苦過程 - 您可以這樣做，但我會建議先嚐試使用另一個庫，例如Raphaël。

http://raphaeljs.com/

使用拉斐爾會爲你節省太多時間試圖找出如何讓跨瀏覽器的矢量圖形（多邊形）的功能 - 以及最重要的是它支持拖動事件已經，這裏有一個例子從他們的圖書館：

http://raphaeljs.com/graffle.html

一旦你有一個自定義背景畫面，你能拋出一些拉斐爾對象到它的最後一步是從緯度/經度值你想要的座標轉換爲像素值。這是可在V3的MapCanvasProjection：

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

您可以使用fromLatLngToDivPixel找出實際像素值是你的拉斐爾多邊形的點，畫它，然後將它與一個添加到覆蓋拖動事件。

Answer 2

您可以爲多邊形上的每個點設置標記，這些標記可能會拖動並在每次拖動結束時重新繪製多邊形。

當您移動該標記時，您也可以在表示多邊形整體的多邊形中心有一個標記，當您移動該標記時，每個標記都可以移動相同的數量以保持形狀。

Answer 3

好了 - 所以看到你正在試圖實現我的網站後，開始覺得自己像拉斐爾，因爲它是一個相當沉重的JS庫可能沒有必要 - 如果你只是想畫我想到了一個矩形多邊形，爲什麼不只是用一個輕量級的DIV來做呢？

但是我認爲拉斐爾的解決辦法仍持有水中其他許多情況下 - 所以我想我就張貼另一種可能的答案。

這裏是工作的例子我扔在一起：

http://www.johnmick.net/drag-div-v3/js/main.js

本質上講，我們做了以下

：

http://www.johnmick.net/drag-div-v3/

隨意看看源

1. 創建自定義疊加層
2. 創建可拖動DIV多邊形，使用jQuery UI，使其可拖動
3. 鐵偵聽當拖動停止，更新矩形
4. 的經緯度位置的對象添加到自定義疊加
一個事件
5. 實現繪製函數變焦過程中重新繪製矩形和平移

目前我只存儲一個經緯度值的矩形（即左上角） - 你可以很容易地擴展這個例子來存儲所有4分的矩形和形狀dynamica lly調整自己的縮放。你可能想這樣做，否則隨着用戶縮小，他們將得到一個面積越來越大的氣候報告。

Answer 4

這裏是我如何做到這一點。找到多邊形的近似中心，然後添加一個標記，然後向該標記添加一個拖動監聽器。在lat/lng變化時，從原始標記lat/lng中減去差值，將差值減去每個路徑，然後將原始位置設置爲新位置。請確保在您的javascript api調用中，您擁有庫=幾何圖形，繪圖

google.maps.event.addListener(draw, 'overlaycomplete', function(shape) { 
// POLYGON 
     if (shape.type == 'polygon') { 
     var bounds = new google.maps.LatLngBounds(); var i; 
     var path = shape.overlay.getPath(); 
     for (i = 0; i < path.length; i++) { bounds.extend(path.getAt(i)); } 
     shape.latLng = bounds.getCenter(); 
     marker = getMarker(map,shape); 
     shape.overlay.marker = marker; 
     markers.push(marker); 
     } 
     google.maps.event.addListener(marker, 'drag', function(event) { 
     shape.overlay.move(event.latLng, shape, path); 
     }); 

      google.maps.event.addListener(shape.overlay, 'rightclick', function() { 
      this.setMap(null); 
      this.marker.setMap(null); 
      draw.setDrawingMode('polygon'); 
      }); 

    }); 
} 
google.maps.Polygon.prototype.move = function(latLng, shape, p) { 
    var lat = latLng.lat(); 
    var lng = latLng.lng(); 

    latDiff = shape.latLng.lat()-lat; 
    lngDiff = shape.latLng.lng()-lng; 

    for (i = 0; i < p.length; i++) { 
    pLat = p.getAt(i).lat(); 
    pLng = p.getAt(i).lng(); 
    p.setAt(i,new google.maps.LatLng(pLat-latDiff,pLng-lngDiff)); 
    } 
    shape.latLng = latLng; 
} 
function getMarker(map,shape){ 
    var infowindow = new google.maps.InfoWindow(); 
    if(shape.type=='polygon'){ latLng = shape.latLng; } 
    marker = new google.maps.Marker({ 
       position: latLng, 
       map:map, 
       draggable:true, 
       clickable: true, 
       animation: google.maps.Animation.DROP 
      }); 
      shape.overlay.marker = marker; 
      shape.overlay.bindTo('center',marker,'position'); 
      google.maps.event.addListener(marker, 'click', (function(marker) { 
      return function() { 
       infowindow.setContent('polygon'); 
       infowindow.open(map, marker); 
       toggleBounce(marker); 
      } 
      })(marker)); 
      google.maps.event.addListener(infowindow,'closeclick', (function(marker) {  
      return function() { 
      marker.setAnimation(null); 
      } 
      })(marker)); 
return marker; 
} 

如果您有任何問題，請隨時與我聯繫。

Answer 5

從版本3.11（2013年1月22日發佈）開始，可以將draggable屬性設置爲google.maps.Polygon實例;見this example。

如果你想以編程方式移動多邊形，你需要a custom Google Maps Extension which I wrote，因爲API不提供這樣的方法。