Browse > Startseite / Google Maps / Geocoding / Google Maps API – Individuelle Windrose

Google Maps API – Individuelle Windrose

26. August 2009

WP Greet Box icon
Hallo! Um regelmäßig über Neuigkeiten auf dieser Seite informiert zu werden, kannst du den RSS-Feed abonnieren. Mehr Informationen über diese Technik gibt es hier.

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:

1
2
3
4
5
6
7
8
9
10

<map name="windrose" id="windrose">
   <area shape="poly" coords="51,5,72,64,83,64,105,6,76,1" href="map.panDirection(0,1);" alt="Norden" />
   <area shape="poly" coords="144,45,87,70,83,65,106,6,129,21" href="map.panDirection(-1,1);" alt="Nord-Osten" />
   <area shape="poly" coords="146,103,87,81,88,71,146,47,151,75" href="map.panDirection(-1,0);" alt="Osten" />
   <area shape="poly" coords="107,142,81,83,85,80,144,104,132,127" href="map.panDirection(-1,-1);" alt="Süd-Osten" />
   <area shape="poly" coords="47,143,74,81,80,83,106,142,78,149" href="map.panDirection(0,-1);" alt="Süden" />
   <area shape="poly" coords="10,104,70,76,74,81,46,142,23,127" href="map.panDirection(1,-1);" alt="Süd-Westen" />
   <area shape="poly" coords="9,46,70,69,69,75,10,103,3,75" href="map.panDirection(1,0);" alt="Westen" />
   <area shape="poly" coords="71,67,9,46,25,21,50,6" href="map.panDirection(1,1);" alt="Nord-Westen" />
</map>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

$(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:)).

Ähnliche Beiträge:

Was ist deine Meinung zu diesem Beitrag?