jQuery von Kopf bis Fuß (German Edition)
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.
Erwischt!
Wir müssen den Code erweitern, damit die Informationen aus der Datenbank geholt werden, wenn sich die Liste ändert, anstatt nur den Kreaturtyp in der Warnmeldung anzeigen.
Erst dann können wir diesen Punkt auf der Liste abhaken. Und wenn wir schon dabei sind, können wir vermutlich den dritten Punkt gleich mitbearbeiten. Krempeln Sie die Ärmel hoch – jetzt bauen wir die Einzelteile zusammen.
Lange Übung
Ergänzen Sie die fehlenden Codezeilen, um eine Funktion mit dem Namen
sichtungen_nach_typ_abfragen
zu erstellen. Dieser Funktion soll als Parameter der Typ der ausgewählten Kreatur übergeben werden. Die Funktion sollte die Daten im JSON-Format abfragen, eine Schleife über die zurückgegebenen Kreaturen ausführen (falls es welche gibt) und die einzelnen Fundorte auf der Karte markieren. Definieren Sie außerdem zwei zusätzliche globale Variablen: ein Array mit dem Namen
marker_array
und ein neues Google Maps-
LatLngBounds
-Objekt mit dem Namen
kartenausschnitt
. Erstellen Sie zudem eine Funktion, die eventuell schon auf der Karte angezeigte Marker entfernt, bevor beim Ändern der Liste neue Markierungen hinzugefügt werden.
Lange Übung Lösung
Durch die beiden neuen globalen Variablen und ein paar anderen Google Maps-Funktionen ist es jetzt möglich, Marker hinzuzufügen und zu entfernen, wenn die Liste verändert wird. Werden neue Marker auf der Karte platziert, wird auch das
marker_array
entsprechend aktualisiert und verwendet, um den Kartenausschnitt anzupassen. Auf diese Weise kann die Karte anhand der Funktion
fitBounds
automatisch ein- und ausgezoomt werden. Die jetzt bei jeder Änderung der Liste aufgerufene Funktion
sichtungen_nach_typ_abfragen
fügt der Karte neue Marker hinzu und erweitert die Liste der Kreaturen auf der Seite.
Freak-Futter
Wir haben hier eine Funktion namens
overlays_loeschen
eingebaut. Sie entfernt alle bereits vorhandenen Marker von der Karte, bevor neue hinzugefügt werden. Google bezeichnet alles, was einer Basiskarte hinzugefügt wird, als Overlay . Das können beispielsweise Objekte vom Typ Marker , Line , Polyline oder Polygon sein. (Es gibt aber noch viel mehr Arten von Overlays.)
Probefahrt
Aktualisieren Sie die Datei karten.js mit dem gerade erstellten Code. Danach können Sie typ_anzeigen.html in Ihrem Browser öffnen und die Kreaturen nach Typ aus der Liste auswählen.
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 Typs 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.
Fast fertig ... nur noch ein Punkt abzuarbeiten!
Kopf-Nuss
Sie wissen bereits, wie Sie Elemente mit jQuery anklickbar machen können. Wie kann Ihnen das dabei helfen, auch die letzte Anforderung auf der Checkliste zu erfüllen?
Es gibt keine: Dummen Fragen
F:
F: Kann ich die Google Maps-API kostenlos auf meiner Website nutzen?
A:
A: Ja. Google stellt die API kostenlos zur privaten und geschäftlichen Nutzung zur Verfügung, sofern Sie sich an die Geschäftsbedingungen (»Terms of Service«) halten.
F:
F: Ich bin mir nicht sicher, ob das für mich zutrifft. Wo kann ich die Geschäftsbedingungen einsehen?
A:
A: Die Geschäftsbedingungen für die Google Maps-API finden Sie unter https://developers.google.com/maps/terms?hl=de-DE .
F:
F: Deckt die Google Maps-API die ganze Welt ab?
A:
A: Nicht ganz, aber sie ist nah dran. Es gibt nur ein paar Länder, die nicht abgedeckt sind. Ein Liste der Länder finden Sie auf der Website der Google Maps-API.
F:
F: Kann ich Karten mit der Google Maps-API auch auf Mobilgeräten darstellen?
A:
A: Ja, das ist möglich. Beim Schreiben dieses Buches hatte die API die Versions-nummer 3. Sie wurde so entwickelt, dass sie auch auf Mobilgeräten funktioniert, die JavaScript unterstützen.
F:
F: Ich würde aber lieber eine App
Weitere Kostenlose Bücher