谷歌地图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); 
    } 
    } 
});