Mapy Google - kreator ścieżek - usuwanie punktów ze ścieżki

Przedwczoraj przedstawiłem aplikację, która pozwala wygenerować linię. Dobry edytor powinien mieć także możliwość usuwania poszczególnych punktów w linii. Dodatkowo zdarzenie usuwania punktu powinno być podczepione do prawego przycisku myszy, tak jak w niektórych programach graficznych.


Pierwszym etapem jest usuwanie pojedynczego punktu z linii. Obiekt GPolyline ma do dyspozycji serię metod związanych z punktami - główną częścią w nazwie jest 'Vertex' - getVertex, getVertexCount, insertVertex, deleteVertex. W naszym przypadku interesująca jest ostatnia funkcja - wystarczy podać indeks punktu i zostanie on usunięty.

c.line.deleteVertex(c.index);

Pewnym problemem jest natomiast obsłużenie zdarzenia kliknięcia prawego przycisku - ponieważ do linii nie można przyłączyć tego zdarzenia - a jedynie do mapy. Funkcja obsługująca zdarzenie singlerightclick przymuje trzy paramtery:

• współrzędne punktu, gdzie zostało kliknięte
• uchwyt do elementu mapy w DOM
• jeżeli został kliknięty jakiś element na mapie (np. warstwa GOverlay), wówczas ten parametr go zawiera, w innych przypadkach jest równy null

W przypadku kliknięcia na punkt zwracany jest obiekt, którego dwie właściwości - index oraz line, będą nas interesować. Właściwość index wskazuje na indeks w tablicy punktów (przydatne do usuwania). Właściwość line zawiera obiekt GPolyline, z którego będziemy wywoływać metodę deleteVertex.

Niestety zarówno kliknięcie w punkt na wierzchołku jak i punkt pomocniczy pomiędzy punktami powoduje otrzymanie tych samych informacji - można to obejść poprzez sprawdzenie otrzymanych współrzędnych (getLatLng) oraz wierzchołka z linii z oznaczonych indeksem.

Dodatkowym zabezpieczeniem przed wykonaniem deleteVertex w momencie, kiedy kliknięty został element nie będący wierzchołkiem jest sprawdzenie czy trzeci parametr jest różny od null, czy posiada właściowść line oraz czy posiada właściwość index, która jest liczbą.

W ten sposób uzyskujemy całą funkcją do obsługi zdarzenia kliknięcia prawego przycisku myszy - wystarczy ten kawałek kodu dodać do funkcji inicjalizującej.

GEvent.addListener(map, 'singlerightclick', function(a,b,c) {
    if (c != null && typeof c.line == "object" && typeof c.index == "number") {
        var vertex = c.line.getVertex(c.index);
        var point =  c.getLatLng();
        
        if(vertex.lat() == point.lat() && vertex.lng() == point.lng()) {
            c.line.deleteVertex(c.index);
        }    
    }
});

Nowa linia