谷歌地圖v3 - 刪除多邊形的頂點

Question

谷歌地圖有繪圖庫繪製多義線和多邊形和其他東西。這裏這個功能

例子：http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html

我想，繪圖和編輯多邊形的時候，才能夠刪除路徑上的一個點/頂點。 API文檔似乎沒有暗示任何事情。

Answer 1

這是當前一項突出的功能請求（由Google確認），issue 3760。

這是我的解決方案：http://jsbin.com/ajimur/10。它使用一個函數，將刪除按鈕添加到傳入的多邊形中（撤消按鈕下方）。

---

另外，有人建議這種做法：right-click to delete closest vertex，它工作正常，但在UI技巧有點欠缺。我使用鏈接代碼構建，以檢查點擊是否位於節點內部（或1像素內） - 在JSBin中：http://jsbin.com/ajimur/。

編輯：正如Amr Bekhit指出的那樣 - 這種方法當前被打破，因爲事件需要附加到多邊形。

Answer 2

Google地圖現在對由多邊形或多段線觸發的事件提供「PolyMouseEvent」回調對象。

要建立在其建議涉及右擊解決其他的答案，所有你需要做的是在V3 API的最新版本如下：

// this assumes `my_poly` is an normal google.maps.Polygon or Polyline 
var deleteNode = function(mev) { 
    if (mev.vertex != null) { 
    my_poly.getPath().removeAt(mev.vertex); 
    } 
} 
google.maps.event.addListener(my_poly, 'rightclick', deleteNode); 

你會發現，任何因爲Google Maps API現在告訴我們我們點擊了哪個頂點，因此有關我們是否接近點的複雜計算不再需要。

注意：這隻會在多段線/多邊形處於編輯模式時起作用。（這是您可能想刪除的頂點是可見的。）

作爲最終的想法，您可以考慮使用單擊或雙擊事件。 「點擊」足夠智能，不會觸發拖動，儘管使用單擊觸發器仍然可能會讓一些用戶感到驚訝。

Answer 3

我發現肖恩的代碼非常簡單和有幫助。當用戶只剩下3個節點時，我只添加了一個限制器來停止刪除。沒有它，用戶可以踏踏實實地只是一個節點，不能再編輯：

my_poly.addListener('rightclick', function(mev){ 
    if (mev.vertex != null && this.getPath().getLength() > 3) { 
     this.getPath().removeAt(mev.vertex); 
    } 
}); 

Answer 4

只是覺得，因爲我一直在尋找一個解決方案過於我會做出貢獻，這是我實現：

if (m_event.hasOwnProperty('edge') && m_event.edge >= 0 && 
GeofenceService.polygon.getPath().getLength() > 3) { 
    GeofenceService.polygon.getPath().removeAt(m_event.edge); 
    return; 
} 

if (m_event.hasOwnProperty('vertex') && m_event.vertex >= 0 && 
GeofenceService.polygon.getPath().getLength() > 3) { 
    GeofenceService.polygon.getPath().removeAt(m_event.vertex); 
    return; 
} 

這允許用於處理頂點節點和邊緣節點的刪除，並通過檢查路徑長度> 3.

Answer 5

我跑進情況下我需要刪除維持最小時刻的三角形形成的多邊形的來自包含多個路徑的多邊形的節點。這裏是肖恩和邪惡的代碼修改：

shape.addListener('rightclick', function(event){ 
    if(event.path != null && event.vertex != null){ 
    var path = this.getPaths().getAt(event.path); 
    if(path.getLength() > 3){ 
     path.removeAt(event.vertex); 
    } 
    } 
});