javascript Google Maps v3 - 删除多边形上的顶点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8831382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps v3 - Delete vertex on Polygon
提问by James F
Google Maps has the Drawing library to draw Polylines and Polygons and other things.
谷歌地图有绘图库来绘制折线和多边形以及其他东西。
Example of this functionality here: http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html
这里功能的示例：http: //gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html
I want, when drawing and editing the polygon, to be able to delete one point/vertex on the path. The API docs haven't seemed to hint at anything.
我希望在绘制和编辑多边形时能够删除路径上的一个点/顶点。API 文档似乎没有暗示任何内容。
采纳答案by Ian Grainger
This is currently an outstanding feature request (acknowledged by Google), issue 3760.
这是当前未完成的功能请求（由 Google 确认），问题 3760。
Here's my solution: http://jsbin.com/ajimur/10. It uses a function that adds a delete button to the passed in polygon (below the undo button).
这是我的解决方案：http: //jsbin.com/ajimur/10。它使用一个函数向传入的多边形添加一个删除按钮（在撤消按钮下方）。
Alternatively, someone suggested this approach: right-click to delete closest vertex, which works fine but is somewhat lacking in UI finesse. I built on the code from the link to check if the click was inside (or within 1 pixel of) the node - in a JSBin here: http://jsbin.com/ajimur/.
或者，有人建议使用这种方法：右键单击以删除最近的 vertex，这可以正常工作，但在 UI 技巧上有些欠缺。我根据链接中的代码进行构建，以检查点击是否在节点内部（或在节点的 1 像素内） - 在此处的 JSBin 中：http: //jsbin.com/ajimur/。
EDIT: as Amr Bekhitpointed out - this approach is currently broken, as the events need to be attached to the polygon.
编辑：正如Amr Bekhit指出的那样 - 这种方法目前已被破坏，因为需要将事件附加到多边形。
回答by Sean Ouimet
Google Maps now provides a "PolyMouseEvent" callback object on events that are triggered from a Polygon or Polyline.
Google 地图现在为从多边形或折线触发的事件提供“ PolyMouseEvent”回调对象。
To build on the other answers which suggested a solution involving a right click, all you would need to do is the following in the latest versions of the V3 API:
要建立在建议涉及右键单击的解决方案的其他答案的基础上，您需要做的就是最新版本的 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);
You'll notice that any complex calculations on whether or not we are near the point are no longer necesary, as the Google Maps API is now telling us which vertex we've clicked on.
您会注意到，不再需要对我们是否在该点附近进行任何复杂的计算，因为 Google Maps API 现在会告诉我们我们点击了哪个顶点。
Note: this will only work while the Polyline/Polygon is in edit mode.(Which is when the vertices you might want to delete are visible.)
注意：这仅在折线/多边形处于编辑模式时有效。（此时您可能要删除的顶点可见。）
As a final thought, you could consider using a click or double click event instead. "Click" is smart enough to not trigger on a drag, though using a single click trigger might still surprise some of your users.
最后，您可以考虑改用单击或双击事件。“单击”足够智能，不会在拖动时触发，但使用单击触发器可能仍会让您的某些用户感到惊讶。
回答by Evil Red Robot
I found Sean's code very simple and helpful. I just added a limiter to stop deleting when the user has only 3 nodes left. Without it, the user can get down to just one node, and can't edit anymore:
我发现 Sean 的代码非常简单且很有帮助。我刚刚添加了一个限制器以在用户只剩下 3 个节点时停止删除。没有它，用户只能使用一个节点，并且不能再进行编辑：
my_poly.addListener('rightclick', function(mev){
if (mev.vertex != null && this.getPath().getLength() > 3) {
this.getPath().removeAt(mev.vertex);
}
});
回答by Evil Red Robot
I ran into situations where I needed to delete nodes from polygons that contained multiple paths. Here's a modification of Sean's and Evil's code:
我遇到过需要从包含多条路径的多边形中删除节点的情况。这是对 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);
}
}
});
回答by andro1d
Just thought I'd contribute because I was looking for a solution for this too, here's my implementation:
只是想我会做出贡献，因为我也在为此寻找解决方案，这是我的实现：
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;
}
This allows for handling deletion of vertex nodes AND edge nodes, and maintains a minimum of a triangle formation polygon at all times by checking the path length > 3.
这允许处理顶点节点和边节点的删除，并通过检查路径长度 > 3 始终保持三角形形成多边形的最小值。
