jQuery von Kopf bis Fuß (German Edition)

anzuzeigen, hat Google es wirklich drauf. Allerdings werden die Punkte hier als Marker bezeichnet. Genau wie alles andere in der Google Maps-API sind auch Marker als Objekte mit eigenen Methoden und Eigenschaften definiert.

    Spitzen Sie Ihren Bleistift
    Erweitern Sie die Funktion
alle_sichtungen_abfragen
um einen click-Event-Listener für den neuen Listeneintrag, bevor dieser zur Liste hinzugefügt wird. Das click-Event sollte eine neue Funktion namens
einzelne_sichtung_abfragen
aufrufen. Als einziger Parameter wird der Funktion die ID der angeklickten Sichtung übergeben. Daraufhin sollte die Funktion die Informationen zur angeklickten Sichtung laden und anhand der Eigenschaften latitude und longitude als Marker auf der Karte anzeigen.
    Spitzen Sie Ihren Bleistift: Lösung
    Nachdem Sie den Code vervollständigt haben, sind die Listeneinträge anklickbar. Die Daten zum angeklickten Kryptiden werden bei Bedarf geladen und auf der Karte angezeigt.
    Probefahrt
    Aktualisieren Sie Ihre Datei karten.js mit den gerade erstellten Funktionen
alle_sichtungen_abfragen
und
einzelne_sichtung_abfragen
. Danach öffnen Sie einzel_anzeige.html im Browser. Die URL sollte auch hier mit http:// beginnen.
    Die beiden ersten Anforderungen haben Sie bereits erfüllt. Wir wollen uns jetzt mit dem dritten Wunsch der Wissenschaftler beschäftigen.
    3)
Es wäre gut, wenn man den Typ des Kryptiden aus einer Liste auswählen und dann alle Kreaturen dieses Typs in unserer Datenbank anzeigen könnte. Außerdem sollen alle Kreaturen eines Typs auf einer Google Maps-Karte dargestellt werden. So können wir herausfinden, an welchen Orten sich die Sichtungen häufen. Am besten sollten diese Punkte, genau wie die Liste der Kreaturen, anklickbar sein, damit die Benutzer die Einzelheiten zu den Sichtungen anzeigen können.

Checkliste für mehrere Kreaturen
    Folgende Schritte sind nötig, um auch die letzte Aufgabe zu lösen.
    Ein Drop-down-Menü mit den möglichen Kreaturen (aus der Datenbank)
Bei Auswahl eines Eintrags aus dem Drop-down-Menü eine Liste der Kreaturen des gewählten Type von der Datenbank abfragen
Alle von der Datenbank zurückgegebenen Kreaturen auf der Karte anzeigen
Sowohl die Listeneinträge als auch die Marker auf der Karte sollen anklickbar sein, damit Besucher sich weitere Informationen auf der Karte anzeigen lassen können.
    Code-Fertiggericht
    Erstellen Sie eine neue Seite mit dem Namen typ_anzeigen.html und speichern Sie sie im selben Verzeichnis wie die übrigen HTML-Dateien für dieses Projekt. Auf dieser Seite soll der Benutzer aus den verschiedenen Kreaturtypen einen auswählen können. Als Resultat sollen danach alle Sichtungen dieses Typs auf der Karte angezeigt werden. Struktur und Stildefinitionen der neuen Seite sind der alten Seite bis auf das neue Element mit der ID
typen_liste
sehr änhlich.
    jQuery-Codemagneten
    Bringen Sie die Magneten in die richtige Reihenfolge, um die Funktion
alle_typen_abfragen
fertigzustellen. Diese Funktion ruft ihrerseits die Datei service.php auf (die dem Download für dieses Kapitel beiliegt), um eine Liste der verschiedenen Kreaturtypen aus der Datenbank abzurufen. Die Typen sollten dann dem Drop-down-Menü mit der ID
typen_liste
hinzugefügt werden. Erstellen Sie auch einen Event-Listener für das Drop-down-Menü, der auf das
change
-Event reagiert und dann den gewählten Wert anhand einer Warnmeldung ausgibt. Da wir die Datei karten.js für beide HTML-Dateien benutzen, muss die
initialisieren
-Funktion erweitert werden. Sie muss überprüfen, ob das Drop-down-Menü existiert, und in diesem Fall die Funktion
alle_typen_abfragen
aufrufen. Gibt es kein Menü, soll stattdessen die Funktion
alle_sichtungen_abfragen
aufgerufen werden.
    jQuery-Codemagneten: Lösung
    Damit haben Sie ein mit der Karte verbundenes Drop-down-Menü, eine Funktion zum Abfragen der Informationen aus der Datenbank (im JSON-Format) für den gewählten Kreaturtyp und eine Warnmeldung, die angezeigt, welcher Typ ausgewählt wurde.
    Probefahrt
    Aktualisieren Sie die Datei karten.js mit der Funktion
alle_typen_abfragen
und dem Event-Listener für das
change
-Event zur Drop-down-Liste. Aktualisieren Sie außerdem die Funktion
initialisieren
mit dieser neuen Logik. Öffnen Sie dann typ_anzeigen.html im Browser, wieder unter Verwendung von http:// .
    Jetzt geht es Schlag auf Schlag! Die Karte ist in Rekordzeit fertig geworden! Es ist Zeit, ein paar Anforderungen von der Checkliste zu streichen.
    Ein Drop-down-Menü mit