Google Maps 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 событие, как вы сказали, и объявить addListenerOnce на set_at Событие Path для сброса координат вершин, если я нахожусь на первой или последней точке.

Следующий слушатель позволит пользователю перетаскивать эти вершины, но они возвращаются обратно в исходное положение:

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