GoogleMaps: Route anpassen

Tach,

heute mal wieder was zu GoogleMaps.
Es soll darum gehen Routen, welche mit GDirections erzeugt werden im Nachhinein anzupassen, d.h. z.B. Farbe, Transparenz und Dicke der Linie, aber auch um z.B. die Symbole der einzelnen Marker auszutauschen.

Zunächst mal die Berechnung der Route selbst:

d = new GDirections();
d.color = "#FF0000";
d.loadFromWaypoints(
  ["40.000,40.000","41.000,41.000"],
  {locale: "de", getPolyline: true}
);

GEvent.addListener(d,'load',replacePolyline);

Dieser Code erzeugt ein neues GDirections-Objekt und berechnet die Route anhand von 2 Wegpunkten.
Dadurch, dass wir dem Konstruktor keine Parameter übergeben wird die Route allerdings noch nicht an die Karte gebunden, d.h. das Overlay wird nich eingeblendet und die Karte wird auch nicht gezoomt oder verschoben.
Wir registrieren uns außerdem einen Event-Handler, der anspringt, sobald unser GDirections-Objekt alle erforderlichen Berechnungen durchgeführt hat.
Ist dies der Fall, wird unsere Funktion „replacePolyLine“ aufgerufen.

function replacePolyline() {
	
        // Original Polyline verstecken
	this.getPolyline().hide();

	var points = [];
	var poly = this.getPolyline();
	for (var i = 0; i < poly.getVertexCount(); i++) {
		points[i] = poly.getVertex(i);
	}

	var p = new GPolyline(points, this.color, 5, 0.5);
	zoomAndMove(p.getBounds());
	map.addOverlay(p);

}

Diese Funktion versteckt nun die originale Polyline unseres GDirections-Objekts und erzeugt stattdessen eine eigene, der wir nun ein beliebiges Aussehen verpassen können.
Danach wird die Karte mittels der Funktion „zoomAndMove“ noch auf die richtige Ansicht gebracht.

function zoomAndMove(b){

	var clat = (b.getNorthEast().lat() + b.getSouthWest().lat()) /2;
	var clng = (b.getNorthEast().lng() + b.getSouthWest().lng()) /2;
	map.setCenter(new GLatLng(clat,clng),map.getBoundsZoomLevel(b));

}

Das wars auch schon. Eigentlich gar nicht so kompliziert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.