KML- und GeoRSS-Ebenen

1. Übersicht
2. Optionen für KML-Ebenen
3. Details zu KML-Funktionen

Mit KmlLayer werden KML- und GeoRSS-Elemente in einer Maps API V3-Kachelüberlagerung wiedergegeben.

Übersicht

In Google Maps API werden die KML- und GeoRSS-Datenformate zum Anzeigen geografischer Informationen unterstützt. Diese Daten werden auf einer Karte mithilfe eines Objekts KmlLayer angezeigt, dessen Konstruktor die URL einer öffentlich zugänglichen KML- oder GeoRSS-Datei verwendet.

Hinweis: Weitere Informationen zu den unterstützten Elementen sowie zu Einschränkungen bezüglich Größe und Komplexität finden Sie auf der Seite KML-Support in der KML-Dokumentation.

In Maps API werden die bereitgestellten geografischen XML-Daten in eine KML-Darstellung umgewandelt, die dann mithilfe einer V3-Kachelüberlagerung angezeigt wird. Die KML-Darstellung (und das Verhalten) entspricht bekannten V3-Überlagerungselementen. Das KML-Element <Placemark> und das GeoRSS-Element point werden beispielsweise als Marker wiedergegeben, Elemente vom Typ <LineString> als Polylinien und Elemente vom Typ <Polygon> als Polygone. Vergleichbar werden Elemente vom Typ <GroundOverlay> als rechteckige Bilder auf der Karte dargestellt. Wichtig ist jedoch, dass es sich bei diesen Objekten nicht um Objekte wie Markers, Polylines, Polygons oder GroundOverlays von Google Maps API handelt; stattdessen werden sie in einem einzelnen Objekt auf der Karte dargestellt.

Objekte vom Typ KmlLayer werden auf der Karte dargestellt, sobald ihre Eigenschaft map definiert wurde. Sie können diese Objekte aus der Karte entfernen, indem Sie setMap() aufrufen und den Wert null übergeben. Mit dem Objekt KmlLayer wird die Wiedergabe dieser untergeordneten Elemente gesteuert, indem automatisch die entsprechenden Funktionen für die definierten Grenzen der Karte abgerufen werden. Wenn sich die Grenzen ändern, werden die Funktionen im aktuellen Viewport automatisch wiedergegeben.

Da alle Komponenten eines Objekts KmlLayer auf Anforderung dargestellt werden, können Sie mit der Ebene ganz einfach die Wiedergabe tausender Marker, Polylinien und Polygone verwalten. Beachten Sie, dass Sie die darin enthaltenen Objekte nicht direkt aufrufen können, obwohl für jedes einzelne Objekt Klickereignisse vorhanden sind, die Daten zu diesen einzelnen Objekten zurückgeben.

Optionen für KML-Ebenen

Der Konstruktor KmlLayer() übergibt wahlweise verschiedene Optionen KmlLayerOptions:

• Mit map wird die Karte (Map) definiert, auf der KmlLayer wiedergegeben wird. Sie können KmlLayer ausblenden, indem Sie diesen Wert in der Methode setMap() auf null setzen.
• Mit preserveViewport wird festgelegt, dass die Karte nicht an die Größe der Inhalte von KmlLayer angepasst werden soll, wenn die Ebene angezeigt wird. Standardmäßig wird die Karte bei der Anzeige von KmlLayer vergrößert und so positioniert, dass sämtliche Inhalte der Ebene angezeigt werden.
• Mit suppressInfoWindows wird angegeben, dass klickbare Funktionen in KmlLayer keine Anzeige von Objekten InfoWindow auslösen sollen.

Darüber hinaus enthält die Option, sobald KmlLayer wiedergegeben wird, eine nicht veränderliche Eigenschaft metadata, die den Namen, die Beschreibung, den Codeausschnitt und den Verfasser in einem Objektliteral KmlLayerMetadata enthält. Diese Informationen können Sie mithilfe der Methode getMetadata() überprüfen. Da die Wiedergabe von Objekten des Typs KmlLayer asynchrone Kommunikation mit einem externen Server erfordert, müssen Sie auf das Ereignis metadata_changed warten, mit dem angegeben wird, dass für die Eigenschaft ein Wert gesetzt wurde.

Im folgenden Beispiel wird KmlLayer aus dem vorgegebenen GeoRSS-Feed konstruiert:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 49.496675, lng: -102.65625}
  });

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.setMap(map);
}

GeoRSS-Beispiel anzeigen.

Im folgenden Beispiel wird KmlLayer aus dem vorgegebenen KML-Feed konstruiert:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 41.876, lng: -87.624}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });
}

KML-Beispiel anzeigen

Details zu KML-Funktionen

Da KML eine große Anzahl Funktionen umfassen kann, können Sie nicht direkt auf Funktionsdaten des Objekts KmlLayer zugreifen. Stattdessen werden die angezeigten Funktionen so dargestellt, dass sie wie klickbare Maps API-Überlagerungen aussehen. Werden einzelne Funktionen angeklickt, wird standardmäßig ein Info-Fenster (InfoWindow) mit KML-Informationen zum Titel (<title>) und zur Beschreibung (<description>) der jeweiligen Funktion angezeigt. Außerdem wird durch Klicken auf eine KML-Funktion ein Ereignis KmlMouseEvent generiert, mit dem folgende Informationen übergeben werden:

• Mit position werden die Breiten- und Längenkoordinaten angegeben, an denen das Info-Fenster (InfoWindow) für diese KML-Funktion verankert ist. Diese Position entspricht bei Polygonen, Polylinien und GroundOverlays der Klickposition, bei Markern jedoch dem tatsächlichen Ursprung des Markers.
• Mit pixelOffset wird der Offset von der obigen position zum Anker des Endpunktes des Info-Fensters (InfoWindow) angegeben. Bei Polygonalobjekten ist dieser Offset normalerweise 0,0; bei Markern enthält der dagegen die Höhe des Markers.
• featureData enthält eine JSON-Struktur von KmlFeatureData.

Nachstehend finden Sie ein Beispielobjekt KmlFeatureData.

{
  author: {
    email: "[email protected]",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

Im folgenden Beispiel wird der Text <Description> der KML-Funktion in einem seitlichen Element <div> angezeigt, wenn auf die Funktion geklickt wird:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 37.06, lng: -95.68}
  });

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml',
    suppressInfoWindows: true,
    map: map
  });

  kmlLayer.addListener('click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
}

KML-Beispiel anzeigen