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

Question

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

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

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

Answer 1

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 2

这是目前一项出色的功能要求(Google承认),问题3760.

这是我的解决方案:http://jsbin.com/ajimur/10.它使用一个向传入的多边形添加删除按钮的功能(在撤消按钮下方).

或者,有人建议使用这种方法:右键单击以删除最近的顶点,这样可以正常工作,但在UI技巧方面有些缺乏.我建立在链接的代码上,以检查点击是否在节点的内部(或在节点的1个像素内) - 在JSBin中:http://jsbin.com/ajimur/.

编辑:正如Amr Bekhit指出的那样 - 这种方法目前已被打破,因为事件需要附加到多边形.

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