Google用固定数量的点映射用户可编辑的多边形吗？

Question

好的，这是我的问题，我将放一张图片来说明。

我需要用户绘制一些多边形，以表示覆盖区域。

多边形需要具有固定数量的点（顶点），因为它稍后会进入处理算法，并且如果多边形可以包含很多点，那将非常慢。

无论如何，在我的示例中，我们坚持使用六边形（6点）。
用户需要能够拖动多边形并对其进行修改，但不能更改点数。

我尝试设置editable: true多边形的选项，效果很好，但它给了我如图所示的情况。它为每个点创建一个手柄，并在每个点之间的中间创建另一个手柄（半透明）。现在，如果用户移动该半透明点，它将在多边形上添加另一个点（顶点），并在新创建的线的中间添加两个句柄。这给了我们7点多边形。

最好的选择是删除那些半透明的手柄，以便用户只能拖动多边形点，这样他就不会影响点的总数。

我可以使用Google Maps的可编辑选项来实现吗？

Answer 1

由于似乎没有人有更好的解决方案，我将我的解决方法标记为已接受，以防有人偶然发现相同的问题。不是很漂亮，但可以完成工作

到目前为止，我找到的唯一解决方案是在绘制多边形后手动隐藏手柄。这里的问题是句柄没有任何 CSS 类或 id，所以我必须隐藏不透明度为 0.5（句柄的不透明度）的所有 div。它有效，但考虑到其他东西可能具有相同的不透明度并且不需要隐藏，因此风险很大。

// variables
var map, path, color;

polygon = new google.maps.Polygon({
    paths: path,
    strokeColor: color,
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: color,
    fillOpacity: 0.10,
    editable: true,
});
polygon.setMap(map);
setTimeout(function(){ map.find('div[style*=opacity: 0.5]').hide(); }, 50);

Answer 2

实现所需目标的另一种方法是放弃多边形的内置编辑能力，并自行实现。这更加强大和灵活。

首先，不要使多边形可编辑。接下来，为多边形的每个角创建一个标记。最后，使每个标记可拖动，并在其“拖动”事件上添加事件侦听器以更新多边形。

进行标记并添加事件侦听器：

for (var i=0; i<coordinates.length; i++){
    marker_options.position = coordinates[i];
    var point = new google.maps.Marker(marker_options);

    google.maps.event.addListener(point, "drag", update_polygon_closure(polygon, i));
}

其中update_polygon_closure定义为：

function update_polygon_closure(polygon, i){
    return function(event){
       polygon.getPath().setAt(i, event.latLng); 
    }
}

完整的代码在jsfiddle中：https ://jsfiddle.net/3L140cg3/16/