Google Maps v3 - удаление вершин на полигоне - PullRequest
Новая
       28

Google Maps v3 - удаление вершин на полигоне

25 голосов
/ 12 января 2012

Google Maps имеет библиотеку рисования для рисования полилиний и многоугольников и других вещей.

Пример этой функции здесь: http://gmaps -samples-v3.googlecode.com / svn-history / r282 / trunk / drawing / drawing-tools.html

Я хочу, чтобы при рисовании и редактировании многоугольника была возможность удалить одну точку / вершину на пути.Документы по API, похоже, ни на что не намекают.

Ответы [ 5 ]

35 голосов
/ 05 июля 2012

Карты Google теперь предоставляют объект обратного вызова « 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 теперь сообщает нам, на какой вершине мы щелкнули.

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

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

26 голосов
/ 14 февраля 2012

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

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

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

РЕДАКТИРОВАТЬ: as Amr Bekhit указал - этот подход в настоящее время не работает, так как события должны быть прикреплены к многоугольнику.

16 голосов
/ 21 января 2013

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

my_poly.addListener('rightclick', function(mev){
    if (mev.vertex != null && this.getPath().getLength() > 3) {
        this.getPath().removeAt(mev.vertex);
    }
});
8 голосов
/ 18 декабря 2013

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

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);
    }
  }
});
2 голосов
/ 23 августа 2013

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

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.

...