Google Maps API – Individuelle Windrose

Ich habe heute in das Demo Mashup eine Windrose eingebaut, und auch dafür gesorgt, dass man die Karte mit der Tastatur scrollen kann. Wenn man den richtigen Befehl kennt, ist das Ganze recht einfach, deswegen erspare ich euch heute das gesamte CSS. Ihr könnt wenn ihr wollt hier nachschauen, wie ihr die Windrose über die Karte gelegt bekommt.

Der Befehl panDirection, den man zum Bewegen der Karte benötigt, ist weder intuitiv, noch sonst irgendwie logisch. Trotzdem kann man mit ihm in alle Himmelsrichtungen scrollen. Da es sich bei der Windrose des Demo Mashups um eine einzelne Grafik handelt, habe ich dafür eine Clickmap erstellt:


   Norden
   Nord-Osten
   Osten
   Süd-Osten
   Süden
   Süd-Westen
   Westen
   Nord-Westen

Ich habe in den Alt-Tag eines Links die Himmelsrichtung eingetragen, ihr solltet somit problemlos die einzelnen Parameter nachvollziehen können. Das Abfragen der Tastatur ist ähnlich einfach:

$(document).keyup(function(e) {
// console.log(e.which);						  
switch(e.which) {
	case 37:
		// Pfeil nach Rechts
		archeol_moveWest();
		break;
	case 38:
		// Pfeil nach Oben
		archeol_moveNorth();
		break;
	case 39:
		// Pfeil nach Links
		archeol_moveEast();
		break;
	case 40:
		// Pfeil nach Unten
		archeol_moveSouth();
		break;
	case 97:
		// Tastaturblock '1'
		archeol_moveSouthWest();
		break;
	case 98:
		// Tastaturblock '2'
		archeol_moveSouth();
		break;
	case 99:
		// Tastaturblock '3'
		archeol_moveSouthEast();
		break;
	case 100:
		// Tastaturblock '4'
		archeol_moveWest();
		break;
	case 102:
		// Tastaturblock '6'
		archeol_moveEast();
		break;
	case 103:
		// Tastaturblock '7'
		archeol_moveNorthWest();
		break;
	case 104:
		// Tastaturblock '8'
		archeol_moveNorth();
		break;
	case 105:
		// Tastaturblock '9'
		archeol_moveNorthEast();
		break;
}
});

Auch hier gilt: genau Ausführungen darüber, was da eigentlich passiert, gibt es hier. Da ich das Scrollen wiederverwenden möchte, habe ich diese in Funktionen gepackt. Prinzipiell kann man aber durchaus die Funktionen durch den Befehl in der Klick-Map ersetzen, und erhält das Gleiche Resultat. Da es sich bei dem Ganzen nur um einen einzelnen Befehl handelt, braucht man wohl nicht mehr dazu sagen (hoffe ich:)).

You may also like

Schreibe einen Kommentar