Google Maps v3 - 删除多边形上的顶点

Question

谷歌地图有绘图库来绘制折线和多边形等。

此功能的示例如下：http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html

在绘制和编辑多边形时，我希望能够删除路径上的一个点/顶点。 API文档似乎没有任何暗示。

Answer 1

这是目前一项杰出的功能要求（谷歌承认），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

我发现Sean的代码非常简单和有用。我刚刚添加了一个限制器，当用户只剩下3个节点时停止删除。没有它，用户可以只使用一个节点，并且不能再编辑：

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

Answer 4

我遇到了需要从包含多个路径的多边形中删除节点的情况。这是Sean和Evil代码的修改：

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);
    }
  }
});

Answer 5

只是觉得我有所贡献，因为我也在寻找解决方案，这是我的实现：

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始终保持最小的三角形成多边形。