Google Maps v3 - Удалить вершину на многоугольнике

Ответ 1

В настоящее время это выдающийся запрос функции (подтвержденный Google), issue 3760.

Здесь мое решение: http://jsbin.com/ajimur/10. Он использует функцию, которая добавляет кнопку удаления в переданный в многоугольник (ниже кнопки отмены).

В качестве альтернативы, кто-то предложил такой подход: щелкните правой кнопкой мыши, чтобы удалить ближайшую вершину, которая отлично работает, но немного уступает тонкости интерфейса. Я построил код из ссылки, чтобы проверить, был ли щелчок внутри (или внутри 1 пикселя) node - в JSBin здесь: http://jsbin.com/ajimur/.

EDIT: как Amr Bekhit указал - этот подход в настоящее время нарушен, так как события должны быть привязаны к полигону.

Ответ 2

В Google Maps теперь отображается объект PolyMouseEvent" событий, которые запускаются из многоугольника или полилинии.

Чтобы основываться на других ответах, в которых предлагалось решение с щелчком правой кнопкой мыши, все, что вам нужно будет сделать, это следующее в последних версиях API V3:

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

Вы заметите, что никаких сложных вычислений относительно того, нужны мы или нет, больше не требуется, поскольку API Карт Google теперь сообщает нам, какую вершину мы нажали.

Примечание: это будет работать только в том случае, если Polyline/Polygon находится в режиме редактирования. (Это то, когда видимые вершины, которые вы хотите удалить, видны.)

В качестве последней мысли вы могли бы подумать об использовании события click или double click. "Click" достаточно умен, чтобы не запускать при перетаскивании, хотя использование триггера с одним щелчком может все еще удивлять некоторых ваших пользователей.

Ответ 3

Я нашел код Шона очень простым и полезным. Я просто добавил ограничитель, чтобы остановить удаление, когда у пользователя осталось всего 3 узла. Без него пользователь может перейти только к одному node и больше не может редактировать:

my_poly.addListener('rightclick', function(mev){
    if (mev.vertex != null && this.getPath().getLength() > 3) {
        this.getPath().removeAt(mev.vertex);
    }
});

Ответ 4

Я столкнулся с ситуациями, когда мне нужно было удалять узлы из многоугольников, содержащих несколько путей. Вот модификация кода Шона и Зла:

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

Ответ 5

Просто подумал, что буду участвовать, потому что я искал решение для этого тоже, здесь моя реализация:

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

Это позволяет обрабатывать удаление вершинных узлов и реберных узлов и постоянно поддерживать минимум многоугольника формирования треугольника, проверяя длину пути > 3.