Übersicht
In dieser Anleitung erfahren Sie, wie Sie Daten aus einer KML-Datei in einer Google-Karte und Seitenleiste anzeigen. Weitere Informationen zur Verwendung von KML-Dateien in Karten finden Sie im Leitfaden zu KML-Ebenen. Wenn Sie auf der Karte unten eine Markierung anklicken, werden Daten in der Seitenleiste angezeigt.
Der folgende Abschnitt enthält den gesamten Code, den Sie zum Erstellen der Karte und Seitenleiste benötigen.
var map; var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml'; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(-19.257753, 146.823688), zoom: 2, mapTypeId: 'terrain' }); var kmlLayer = new google.maps.KmlLayer(src, { suppressInfoWindows: true, preserveViewport: false, map: map }); kmlLayer.addListener('click', function(event) { var content = event.featureData.infoWindowHtml; var testimonial = document.getElementById('capture'); testimonial.innerHTML = content; }); }
<div id="map"></div> <div id="capture"></div>
html, body { height: 370px; padding: 0; margin: 0; } #map { height: 360px; width: 300px; overflow: hidden; float: left; border: thin solid #333; } #capture { height: 360px; width: 480px; overflow: hidden; float: left; background-color: #ECECFB; border: thin solid #333; border-left: none; }
<!-- Replace the value of the key parameter with your own API key. --> <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
Selbst ausprobieren
Sie können mit diesem Code in JSFiddle experimentieren. Dazu klicken Sie oben rechts im Codefenster auf das Symbol <>
.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Click Capture Sample</title>
<style>
html, body {
height: 370px;
padding: 0;
margin: 0;
}
#map {
height: 360px;
width: 300px;
overflow: hidden;
float: left;
border: thin solid #333;
}
#capture {
height: 360px;
width: 480px;
overflow: hidden;
float: left;
background-color: #ECECFB;
border: thin solid #333;
border-left: none;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="capture"></div>
<script>
var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: 'terrain'
});
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
kmlLayer.addListener('click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
</script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Erste Schritte
Zum Erstellen der Karte und Seitenleiste für diese Anleitung sind folgende Schritte erforderlich:
KML-Datei für den Import einrichten
Die KML-Datei muss dem KML-Standard entsprechen. Weitere Informationen zu diesem Standard finden Sie auf der Website des Open Geospatial Consortium. Die Sprache wird auch in der KML-Dokumentation von Google beschrieben. Sie bietet sowohl eine Referenz- als auch eine konzeptionelle Entwicklerdokumentation.
Wenn Sie noch am Anfang sind und keine KML-Datei haben, können Sie…
die folgende KML-Datei für diese Anleitung verwenden:
https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml
eine KML-Datei im Web suchen. Dazu bietet sich der
filetype
-Suchoperator von Google an.Ersetzen Sie
velodromes
durch einen Suchbegriff oder lassen Sie den Begriff ganz weg, damit nach allen KML-Dateien gesucht wird.
Wenn Sie eine eigene Datei erstellen, wird im Code in diesem Beispiel von Folgendem ausgegangen:
- Sie haben die Datei öffentlich im Internet gehostet. Das ist für alle Anwendungen erforderlich, die KML in ein
KMLLayer
-Objekt laden, damit die Server von Google den Inhalt finden und abrufen können, um ihn auf der Karte anzuzeigen. - Die Datei befindet sich nicht auf einer passwortgeschützten Seite.
- Für Ihre Features sind Infofensterinhalte vorhanden. Sie können diese Inhalte in ein
description
-Element aufnehmen oder mit einemExtendedData
-Element und einer Entitätsersetzung (siehe unten) einfügen. Beide sind über die EigenschaftinfoWindowHtml
des Merkmals verfügbar.
„ExtendedData“-Elemente
Die KML-Datei in dieser Anleitung enthält Informationen zu Features in einem ExtendedData
-Element. Um diese Informationen in die Beschreibung der Funktion einzubinden, verwenden Sie die Entitätsersetzung. Diese ist im Grunde eine Variable im BalloonStyle
-Tag.
In der folgenden Tabelle wird der Code für diesen Abschnitt erläutert.
Code und Beschreibung | |
---|---|
|
Die KML-Datei hat ein einzelnes Style -Element, das auf alle Ortsmarkierungen angewendet wird. Dieses Style -Element weist dem BalloonStyle -Textelement den Wert #[video] zu.Das Format $[x] weist den KML-Parser an, nach einem Data -Element namens video zu suchen und dieses als Text für das Info-Pop-up zu verwenden. |
|
Jede Placemark enthält ein ExtendedData -Element, das das Element Data enthält.
Jedes Placemark hat ein einzelnes Data -Element mit dem Namensattribut video .In der Anleitung wird das eingebettete YouTube-Video als Wert für den Text der Info-Pop-ups der einzelnen Ortsmarkierungen verwendet. |
Weitere Informationen zum Ersetzen von Entitäten finden Sie auf der Seite zum Hinzufügen von benutzerdefinierten Daten der KML-Dokumentation.
„KMLLayer“-Objekt anzeigen
Karte initialisieren
In der folgenden Tabelle wird der Code für diesen Abschnitt erläutert.
Code und Beschreibung | |
---|---|
|
Damit KML-Daten auf einer Karte angezeigt werden können, müssen Sie zuerst die Karte erstellen. Dieser Code erstellt ein neues Google Maps-Objekt, legt Mittelpunkt und Zoomstufe dafür fest und hängt die Karte an das div -Element an.Weitere Informationen zu den Grundlagen der Erstellung einer Google-Karte finden Sie in der Anleitung Google Maps-Karte mit einer Markierung auf Ihrer Website hinzufügen. |
„KMLLayer“-Objekt erstellen
In dieser Tabelle wird der Code erläutert, mit dem ein „KMLLayer“-Objekt erstellt wird.
Code und Beschreibung | |
---|---|
|
Erstellt ein neues „KMLLayer“-Objekt, um Ihre KML-Daten anzuzeigen. |
|
Der „KMLLayer“-Konstruktor definiert die URL Ihrer KML-Datei. Außerdem legt er Eigenschaften für das „KMLLayer“-Objekt fest, um…
|
Daten in der Seitenleiste anzeigen
In diesem Abschnitt werden die Einstellungen erläutert, mit denen der Inhalt des Infofensters in der Seitenleiste angezeigt wird, wenn Sie auf ein Feature auf der Karte klicken. Das läuft so ab:
- Es wird auf ein Klickereignis auf eines der Features des „KMLLayer“-Objekts gewartet.
- Die Daten des angeklickten Features werden erfasst.
- Die Daten werden in der Seitenleiste ausgegeben.
Ereignis-Listener hinzufügen
Google Maps bietet eine Funktion, mit der Nutzerereignisse auf der Karte, wie Klicks oder Tastatureingaben, erfasst werden und entsprechend darauf reagiert werden kann. Für solche click
-Ereignisse wird ein Listener hinzugefügt.
In der folgenden Tabelle wird der Code für diesen Abschnitt erläutert.
Code und Beschreibung | |
---|---|
|
Für den Ereignis-Listener kmlLayer.addListener ist Folgendes wichtig:
|
KML-Daten in der Seitenleiste ausgeben
Inzwischen haben Sie Klickereignisse für die Features der Ebene erfasst. Nun können Sie die Anwendung so konfigurieren, dass die Daten des Features und der Inhalt des Infofensters in der Seitenleiste ausgegeben werden.
In der folgenden Tabelle wird der Code für diesen Abschnitt erläutert.
Code und Beschreibung | |
---|---|
|
Übergibt den Inhalt des Infofensters an eine Variable. |
|
Identifiziert das div -Element, an das der Inhalt übergeben werden soll, und ersetzt den HTML-Code darin durch den Inhalt des Features.
|
|
Diese Codezeilen werden zur Funktion im addListener -Konstruktor.
|
Jedes Mal, wenn Sie nun ein KML-Element auf der Karte anklicken, wird die Seitenleiste aktualisiert und der Inhalt des entsprechenden Infofensters angezeigt.