Mapy Google - kreator ścieżek

API dołączone do map Googla umożliwia łatwe zbudowanie kreatora ścieżek (linii - GPolyline) oraz wielokątów (GPolygon). Metody dołączone od wersji 2.111 - enableDrawing oraz enableEditing tworzą praktycznie całe środowisko do składania ścieżek. Pozostaje jedynie dorobić opcje wyświetlania współrzędnych w taki sposób, aby można było je wykorzystać w kolejnej aplikacji.

Pierwszym etapem dodawania ścieżki jest utworzenie obiektu GPolygon oraz uruchomienie trybu edycji. W celu rozpoczęcia edycji nie musimy podawać żadnych punktów do linii, wystarczy podać pustą tablicę.
var poly = new GPolyline([]);
map.addOverlay(poly); 

Po dodaniu do mapy wykonywana jest operacja włączenia trybu edycji.
poly.enableDrawing();

W celu włączenia możliwości edycji po wygenerowaniu zmiennej ustalane jest działanie enableEditing oraz disableEditing. W przykładzie edycja będzie włączana dopiero w momencie najechania myszką na linię (mouseover) oraz wyłączana po usunięciu się kursora z linii (mouseout). Parametr onEvent pozwala określać, podczas którego zdarzenia ma zostać ustawiony tryb edycji. Co ciekawe w oficjalnej dokumentacji nie ma podanego tego parametru - jednak we wpisie na oficjalnym blogu map Googla już jest.
poly.enableEditing({onEvent: "mouseover"});
poly.disableEditing({onEvent: "mouseout"});

Na koniec pozostaje wyeksponować dane wygenerowanej ścieżki. W tym celu wykorzystany zostanie element textarea, do którego będą wpisywane dane w formacie lat, lng\n. Koniec kreacji linii następuje w momencie, kiedy nastąpi zdarzenie podwójnego kliknięcia. Wówczas zostanie wywołane zdarzenie "endline" dla generowanej ścieżki, gdzie zdefiniujemy wyświetlanie parametrów ścieżki. W przypadku, kiedy linia jest edytowana przez przeciąganie punktów znajdujących się pomiędzy wierzchołkami wywoływane jest zdarzenie "lineupdated". Rozpatrywany przypadek nie wymaga zmiany logiki w przypadku tych dwóch zdarzeń, dlatego zdefinujemy dwa razy to samo dla różnych zdarzeń.

GEvent.addListener(poly, "endline", function() {
    document.getElementById('textarea').innerHTML = '';
    for (var i=0; i<poly.getvertexcount(); i++)="" {="">
       var vertex = poly.getVertex(i);
       document.getElementById('textarea').innerHTML += vertex.lat()+', '+vertex.lng()+"\n";
    }
});
           
GEvent.addListener(poly, "lineupdated", function() {
   document.getElementById('textarea').innerHTML = '';
   for (var i=0; i<poly.getvertexcount(); i++)="" {="">
      var vertex = poly.getVertex(i);
      document.getElementById('textarea').innerHTML += vertex.lat()+', '+vertex.lng()+"\n";
   }
}); 

Na koniec składając wszystko razem wychodzi funkcja draw(), którą można podczepić do zdarzenia click linku lub innego elementu:
function draw() {
 poly = new GPolyline([]);
 map.addOverlay(poly);
 poly.enableDrawing();
  
 poly.enableEditing({onEvent: "mouseover"});
 poly.disableEditing({onEvent: "mouseout"});
 GEvent.addListener(poly, "endline", function() {
  document.getElementById('textarea').innerHTML = '';
  for (var i=0; i<poly.getVertexCount(); i++) {
   var vertex = poly.getVertex(i);
   document.getElementById('textarea').innerHTML += vertex.lat()+', '+vertex.lng()+"\n";
  }
 });
     
 GEvent.addListener(poly, "lineupdated", function() {
  document.getElementById('textarea').innerHTML = '';
  for (var i=0; i<poly.getVertexCount(); i++) {
   var vertex = poly.getVertex(i);
   document.getElementById('textarea').innerHTML += vertex.lat()+', '+vertex.lng()+"\n";
  }
 });
}

I w ten sposób mamy działający generator ścieżek (do linku 'Nowa linia' jest podpięta funkcja draw() :)):



Nowa linia




Prześlij dalej:

2 komentarze:

Anonimowy pisze...

Świetny tutorial - moje pytanie brzmi tylko jak po narysowaniu odpowiednich ścieżek móc je wyświetlić na innej stronie wraz z mapą google - rozumiem że należy gdzieś te współrzędne mu zapisać - pytanie gdzie...

Michał Biniek pisze...

Jeżeli korzystasz z GMaps w wersji 3 to współrzędne można podać do konstruktora obiektu Polyline jako tablica obiektów LatLng:
var path = new google.maps.Polyline({
path: [
new google.maps.LatLng(46.07323062540835, 3.69140625),
new google.maps.LatLng(50.28933925329177, 15.64453125),
new google.maps.LatLng(44.33956524809713, 20.56640625)
]
})

Polecam także dokumentację:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Polylines

Prześlij komentarz