Google 地图 Api：折线可编辑事件 - 使顶点不可编辑

Question

我想将可编辑折线的起点和终点设为不可编辑。这样用户就可以编辑除这两个顶点之外的所有其他顶点。我已经实现了一个事件侦听器 (mousedown) 来过滤顶点，但是我怎样才能阻止它被编辑呢？

google.maps.event.addListener(poly, 'mousedown', function (event) {
    if (event.vertex === 0) { // First vertex of polyline
        //disable vertex from being editable
    }
});

Answer 1

你走在正确的道路上。

要检测顶点是否已移动，您可以在折线的路径上监听 set_at 事件。但是，这不会让你知道原来的位置是什么，所以我要做的是捕获 mousedown 事件，就像你说的那样，并在 [=12= 上声明一个 addListenerOnce ] 如果我在第一个或最后一个点上，则重置顶点坐标的路径事件。

下面的侦听器将允许用户拖动那些顶点，但它们会自动回到原来的位置：

google.maps.event.addListener(poly, 'mousedown', function (event) {
    var thePath = this.getPath();
    if (event.vertex === 0 || event.vertex === thePath.getLength() - 1) {
        google.maps.event.addListenerOnce(thePath, 'set_at', function (vertex) {
            this.setAt(vertex, event.latLng);
        });
    }
});

为什么我要使用 addListenerOnce？你看，那是因为否则重置第一个或最后一个点的行为会触发相同的事件，导致最大堆栈错误。

编辑：这是另一个镜头。以下侦听器将不允许用户拖动所述顶点。但是，我立即重新启用可编辑行为。您的浏览器可能存在竞争条件。

google.maps.event.addListener(poly, 'mousedown', function (event) {
    var thePath = this.getPath();

    if (event.vertex === 0 || event.vertex === thePath.getLength() - 1) {
        console.debug('Vertex forbidden!');
        this.set('editable',false);
        this.set('editable',true);
    } 
});

Google 地图 Api：折线可编辑事件 - 使顶点不可编辑

Google Maps Api: Polyline editable events - Make a vertex non-editable

google-maps

google-maps-api-3

polyline

vertex