Google Maps v3 - Elimina vertice su poligono

Question

Google Maps ha la libreria Disegno per disegnare polilinee e poligoni e altre cose.

esempio di questa funzionalità qui: http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html

che voglio, quando il disegno e la modifica del poligono, per essere in grado di eliminare un punto/vertice sul percorso. I documenti API non sembrano suggerire nulla.

Answer 1

Questa è attualmente una richiesta di funzionalità eccezionale (riconosciuta da Google), issue 3760.

Ecco la mia soluzione: http://jsbin.com/ajimur/10. Usa una funzione che aggiunge un pulsante di cancellazione al poligono passato (sotto il pulsante Annulla).

---

In alternativa, qualcuno ha suggerito questo approccio: right-click to delete closest vertex, che funziona bene, ma è un po 'carente in UI finezza. Ho creato il codice dal link per verificare se il clic era all'interno (o entro 1 pixel di) del nodo - in un JSBin qui: http://jsbin.com/ajimur/.

EDIT: come Amr Bekhit sottolineato: questo approccio è attualmente interrotto, poiché gli eventi devono essere collegati al poligono.

Answer 2

Google Maps ora fornisce un oggetto di richiamata "PolyMouseEvent" su eventi attivati ​​da un poligono o polilinea.

Per costruire sulle altre risposte che hanno suggerito una soluzione che comprenda un click destro, tutto quello che avrebbe bisogno di fare è il seguente nelle ultime versioni delle 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); 

Si noterà che qualsiasi calcoli complessi sul fatto che siamo vicini al punto non sono più necessari, poiché l'API di Google Maps ora ci dice quale vertice abbiamo fatto clic.

Nota: funziona solo quando Polilinea/Poligono è in modalità di modifica. (che è quando i vertici che potresti voler eliminare sono visibili.)

Come ultimo pensiero, potresti prendere in considerazione l'utilizzo di un clic o di un evento doppio clic. "Click" è abbastanza intelligente da non attivarsi durante il trascinamento, anche se l'utilizzo di un trigger con un solo clic potrebbe sorprendere alcuni dei tuoi utenti.

Answer 3

Ho trovato il codice di Sean molto semplice e utile. Ho appena aggiunto un limitatore per interrompere l'eliminazione quando l'utente ha solo 3 nodi rimasti. Senza di esso, l'utente può ottenere fino a solo un nodo, e non può modificare più:

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

Answer 4

Ho pensato di contribuire perché ero alla ricerca di una soluzione anche per questo, ecco la mia realizzazione:

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

Ciò consente la movimentazione cancellazione di nodi vertex e nodi periferici, e mantiene un minimo di un poligono formazione triangolare sempre controllando la lunghezza del percorso> 3.

Answer 5

ho funzionato in situazioni dove ho bisogno di cancellare nodi da poligoni che contenevano percorsi multipli.Ecco una modifica del codice di Sean e di Evil:

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