Kartentypen

Kartentypen

In diesem Dokument werden die Kartentypen erörtert, die Sie mithilfe von Google Maps JavaScript API anzeigen können. In der API wird ein Objekt MapType verwendet, das Informationen zu diesen Karten enthält. Ein Objekt MapType ist eine Schnittstelle, mit der die Anzeige und Verwendung von Kartenkacheln sowie die Übersetzung von Koordinatensystemen aus Bildkoordinaten in Weltkoordinaten (auf der Karte) definiert wird. Jedes Objekt MapType muss einige Methoden für das Abrufen und Freigeben von Kacheln sowie einige Eigenschaften zur Definition des visuellen Verhaltens enthalten.

Wie Kartentypen im Einzelnen in der Maps API funktionieren, ist ein weiterführendes Thema. Für die meisten Entwickler ist es ausreichend, einfach die nachfolgend genannten Basiskartentypen zu verwenden. Sie können jedoch auch Ihre eigenen Kartenkacheln mithilfe benutzerdefinierter Kartentypen erstellen oder die Darstellung vorhandener Kartentypen mithilfe von Formatierten Karten ändern. Um benutzerdefinierte Kartentypen bereitzustellen, müssen Sie wissen, wie man die Map Type Registry der Karte bearbeitet.

Basiskartentypen

In Google Maps API werden vier verschiedene Kartentypen bereitgestellt. Neben den Straßenkartenkacheln mit der vertrauten Farbgebung unterstützt Google Maps API auch noch weitere Kartentypen.

Folgende Kartentypen sind in Google Maps API verfügbar:

  • MapTypeId.ROADMAP: Zeigt die Standardansicht von Straßenkarten. Dies ist der Standardkartentyp.
  • MapTypeId.SATELLITE: Zeigt Google Earth-Satellitenaufnahmen.
  • MapTypeId.HYBRID: Zeigt eine Kombination aus normalen Ansichten und Satellitenaufnahmen.
  • MapTypeId.TERRAIN: Zeigt eine physische Karte basierend auf Geländeinformationen.

Sie bearbeiten den von der Karte (Map) verwendeten Kartentyp, indem Sie ihre Eigenschaft mapTypeId definieren. Dies erfolgt entweder im Konstruktor über das Objekt Map options oder durch Aufrufen der Kartenmethode setMapTypeId(). Für die Eigenschaft mapTypeID ist standardmäßig der Wert MapTypeId.ROADMAP gesetzt.

Einstellung von mapTypeId während der Erstellung:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"),
    mapOptions);

Dynamische Änderung von mapTypeId:

map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

Beachten Sie, dass Sie den Kartentyp der Karte nicht direkt definieren, sondern stattdessen festlegen, dass die mapTypeId der Karte mithilfe eines Kennzeichners auf einen MapType verweist. Maps Javascript API V3 verwendet für die Verwaltung dieser Verweise eine Map Type Registry, die nachfolgend erläutert ist.

45 °-Bilder

In Google Maps API werden spezielle 45 °-Bilder für bestimmte Standorte unterstützt. Diese hochauflösenden Bilder ermöglichen perspektivische Ansichten für jede Himmelsrichtung (Norden, Süden, Osten, Westen). Diese Bilder sind für unterstützte Kartentypen in größeren Vergrößerungsstufen verfügbar.

Das nachfolgende Bild zeigt eine perspektivische 45 °-Ansicht der Strandpromenade in Santa Cruz, Kalifornien:

Die Kartentypen google.maps.MapTypeId.SATELLITE und google.maps.MapTypeId.HYBRID unterstützen 45 °-Bilder in großen Vergrößerungsstufen, sofern verfügbar. Wenn ein Benutzer einen Standort vergrößert, für den diese Bilder vorhanden sind, werden die Ansichten der Kartentypen automatisch wie folgt verändert:

  • Das Satelliten- oder Hybridbild wird durch Bilder mit einer 45 °-Perspektive ersetzt, in deren Mittelpunkt sich der aktuelle Standort befindet. Standardmäßig sind diese Bilder nach Norden ausgerichtet. Verkleinert der Benutzer die Ansicht, wird wiederum das Satelliten- oder Hybridbild angezeigt.
  • Das Rotationssteuerelement bietet eine Kombination aus Neigungs- und Drehoptionen. Ist rotateControl auf true gesetzt, wird ein Neigungssteuerelement angezeigt, sobald das 45 °-Bild verfügbar ist. Über das Neigungssteuerelement kann der Benutzer das Bild in einem 45 °-Winkel neigen.
  • Wenn das Bild geneigt ist, wird ein Häkchen anzeigt, mit dem der Benutzer die Ansicht um 90 ° im Uhrzeigersinn drehen kann.

Wird ein Kartentyp, der ein 45 °-Bild anzeigt, verkleinert, werden die einzelnen Änderungen wieder zurückgenommen, und der ursprüngliche Kartentyp wird wiederhergestellt.

In Google werden laufend 45 °-Bilder für neue Orte hinzugefügt. Die neuesten Informationen finden Sie in der Liste der 45 °-Bilder in Google Maps.

45 °-Bilder aktivieren und deaktivieren

Sie können 45 °-Bilder deaktivieren, indem Sie setTilt(0) im Objekt Map aufrufen. Um 45 °-Bilder für unterstützte Kartentypen zu aktivieren, rufen Sie setTilt(45) auf.

Die Methode getTilt() der Karte (Map) gibt immer die aktuell auf der Karte angezeigte Neigung wieder. Wenn Sie eine Karte neigen und diese Neigung später entfernen (z. B. durch Verkleinern der Kartenansicht), erhält die Kartenmethode getTilt() wieder den Wert 0.

Im nachfolgenden Beispiel ist eine 45 °-Ansicht der Innenstadt von Portland, Oregon, dargestellt:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 36.964, lng: -122.015},
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });
  map.setTilt(45);
}

Beispiel anzeigen (aerial-simple.html).

45 °-Bilder drehen

45 °-Bilder bestehen eigentlich aus einer Sammlung von Bildern für jede Himmelsrichtung (Norden, Süden, Osten, Westen). Sobald Ihre Karte ein 45 °-Bild anzeigt, können Sie das Bild in eine der vier Himmelrichtungen ausrichten, indem Sie setHeading() im Objekt Map aufrufen und einen Zahlenwert übergeben, der die Gradzahl von Norden angibt.

Im nachfolgenden Beispiel wird eine Luftaufnahme gezeigt, die nach dem Anklicken der Schaltfläche alle 3 Sekunden gedreht wird:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 45.518, lng: -122.672},
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    heading: 90,
    tilt: 45
  });
}

function rotate90() {
  var heading = map.getHeading() || 0;
  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

Beispiel anzeigen (aerial-rotation.html).

Map Type Registry bearbeiten

Die mapTypeId einer Karte ist eine Zeichenfolgen-ID, mithilfe derer ein Kartentyp (MapType) mit einem eindeutigen Wert verbunden wird. Jedes Objekt Map verfügt über eine MapTypeRegistry, in der sämtliche verfügbaren Kartentypen (MapTypes) für diese Karte enthalten sind. Mit dieser Registry werden beispielsweise die Kartentypen ausgewählt, die im Steuerelement „MapType“ der Karte verfügbar sind.

Sie können keine Daten direkt aus der Map Type Registry beziehen. Stattdessen bearbeiten Sie die Registry, indem Sie benutzerdefinierte Kartentypen hinzufügen und ihnen eine frei gewählte Zeichenfolgen-ID zuweisen. Sie können die Basiskartentypen nicht bearbeiten (Sie können Sie lediglich aus der Karte entfernen, indem Sie das Erscheinungsbild der Karte in ihren mapTypeControlOptions verändern).

Mit dem folgenden Code wird festgelegt, dass in den Kartenoptionen mapTypeControlOptions nur zwei Kartentypen angezeigt werden. Außerdem wird die Registry dahingehend geändert, dass die Zuordnung mit dieser ID zur tatsächlichen Implementierung der Schnittstelle MapType hinzugefügt wird. Hinweis: Wir haben bewusst darauf verzichtet, die Erstellung des eigentlichen benutzerdefinierten Kartentyps im vorangestellten Code zu dokumentieren. Informationen zum Erstellen eins Kartentypen finden Sie in den nachfolgenden Abschnitten Formatierte Karten oder Benutzerdefinierte Kartentypen.

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is simply an association, we
// don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById("map"),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

Formatierte Karten

Mit StyledMapType können Sie die Darstellung der Google-Standardbasiskarten anpassen, indem Sie verändern, in welcher Weise Elemente wie Straßen, Parks und bebaute Flächen angezeigt werden, um andere Formatierungen als im Standardkartentyp zu verwenden.

Informationen zu StyledMapType finden Sie im Abschnitt Formatierte Karten in diesem Entwickler-Leitfaden.

Benutzerdefinierte Kartentypen

In Google Maps JavaScript API werden nun auch Anzeige und Verwaltung benutzerdefinierter Kartentypen unterstützt, sodass Sie die Möglichkeit haben, eigene Kartenbilder oder Kachelüberlagerungen zu implementieren.

Die V3 API bietet verschiedene mögliche Kartentypimplementierungen:

  • Standardkachelsätze bestehend aus Bildern, die gemeinsam vollständige kartografische Karten bilden. Diese Kachelsätze werden auch als Basiskartentypen bezeichnet. Das Verhalten dieser Kartentypen entspricht dem der vorhandenen Standardkartentypen: ROADMAP, SATELLITE, HYBRID und TERRAIN. Sie können Ihren benutzerdefinierten Kartentyp zu einem Karten-Array mapTypes hinzufügen, damit Ihr benutzerdefinierter Kartentyp auf der Benutzeroberfläche von Maps API als Standardkartentyp behandelt wird (z. B. durch Einbinden Ihres Kartentyps in das Steuerelement „MapType“).
  • Überlagerungen von Bildkacheln, die über vorhandene Basiskartentypen gelegt werden. Im Allgemeinen werden diese Kartentypen dazu verwendet, um einen vorhandenen Kartentyp zu augmentieren, sodass zusätzliche Informationen angezeigt werden; häufig sind diese Kartentypen auf bestimmte Standorte und/oder Vergrößerungsstufen beschränkt. Beachten Sie, dass diese Kacheln transparent sein können, sodass Sie Funktionen zu vorhandenen Karten hinzufügen können.
  • Kartentypen ohne Bild, die Ihnen die Veränderung der Anzeige der grundlegendsten Karteninformationen ermöglichen.

Für jede dieser Optionen muss eine Klasse erstellt werden, mit der die Schnittstelle MapType implementiert wird. Darüber hinaus bietet die Klasse ImageMapType einige integrierte Handlungsweisen, um das Erstellen von Kartentypen (MapType) mit Bildern zu vereinfachen.

Bevor wir auf die Klassen eingehen, mithilfe derer MapType implementiert wird, muss unbedingt bekannt sein, wie in Google Maps Koordinaten ermittelt werden und wie entschieden wird, welche Teile der Karte angezeigt werden. Für alle Basis- oder Überlagerungskartentypen (MapType) müssen Sie eine ähnliche Logik implementieren.

Kartenkoordinaten

In Google Maps API werden verschiedene Koordinatensysteme verwendet:

  • Längen- und Breitenwerte, die auf einen eindeutigen Punkt der Welt verweisen. (Google verwendet den Standard World Geodetic System WGS84.)
  • Weltkoordinaten, die auf einen eindeutigen Punkt der Karte verweisen.
  • Kachelkoordinaten, die auf eine bestimmte Kachel auf der Karte bei einer bestimmten Vergrößerungsstufe verweisen.

Weltkoordinaten

Jedes Mal, wenn in Maps API ein Ort auf der Welt in einen Standort auf der Karte (dem Bildschirm) übersetzt werden muss, müssen zunächst die Breiten- und Längenwerte in eine „Weltkoordinate“ umgerechnet werden. Diese Übersetzung wird mithilfe einer Kartenprojektion erreicht. Zu diesem Zweck wird in Google Maps die Mercator-Projektion verwendet. Sie können auch eine eigene Projektion definieren, indem Sie die Schnittstelle google.maps.Projection implementieren. (Beachten Sie, dass Schnittstellen in V3 keine Klassen sind, denen Sie „Teilklassen“ zuweisen, sondern einfache Angaben für Klassen, die Sie selbst definieren.)

Um die Pixelkoordinaten einfacher berechnen zu können (siehe unten), setzen wir voraus, dass eine Karte bei Vergrößerungsstufe 0 aus einer einzelnen Kachel in der Basiskachelgröße besteht. Anschließend definieren wir die Weltkoordinaten relativ zu den Pixelkoordinaten bei Vergrößerungsstufe 0 und verwenden die Projektion, um die Längen- und Breitenkoordinaten in Pixelpositionen auf dieser Basiskachel umzurechnen. Diese Weltkoordinate ist ein Gleitkommawert, der vom Ursprung der Kartenprojektion zum jeweiligen Ort gemessen wird. Hinweis: Da dieser Wert ein Gleitkommawert ist, kann er deutlich präziser sein, als dies aufgrund der aktuellen Auflösung des Kartenbildes angezeigt wird. Dies bedeutet mit anderen Worten, dass eine Weltkoordinate unabhängig von der aktuellen Vergrößerungsstufe ist.

Weltkoordinaten in Google Maps werden vom Ursprung der Mercator-Projektion gemessen (die nordwestliche Ecke der Karte bei 180 Grad Länge und ca. 85 Grad Breite). Die Koordinaten steigen in der Richtung x gen Osten (nach rechts) und in der Richtung y gen Süden (nach unten). Da die Maße der Mercator-Basiskachel in Google Maps 256x256 Pixel betragen, ist der verwendbare Raum der Weltkoordinaten {0-256}, {0-256} (siehe unten).

Beachten Sie, dass eine Mercator-Projektion eine begrenzte Breite in der Länge hat, aber eine unbegrenzte Höhe in der Breite. Durch Verwenden der Mercator-Projektion werden die Bilder der Grundkarte bei ca. +/- 85 Grad „abgeschnitten“, damit die daraus resultierende Kartenform quadratisch ist, sodass eine einfachere Logik für die Kachelauswahl erreicht wird. Beachten Sie, dass eine Projektion zu Weltkoordinaten führen kann, die außerhalb des verwendbaren Koordinatenraums der Karte liegen können, wenn Sie beispielsweise Regionen nahe der Pole grafisch darstellen.

Pixelkoordinaten

Weltkoordinaten geben absolute Positionen bei einer bestimmten Projektion wieder; diese müssen jedoch in Pixelkoordinaten umgewandelt werden, um den „Pixeloffset“ bei einer bestimmten Vergrößerungsstufe zu bestimmen. Diese Pixelkoordinaten werden mit folgender Formel berechnet:

pixelCoordinate = worldCoordinate * 2zoomLevel

Beachten Sie, dass in der obigen Gleichung die jeweils nächstgrößere Vergrößerungsstufe sowohl in der Ausdehnung x als auch der Ausdehnung y zweimal so groß ist. Aus diesem Grund ist die Auflösung jeder nächstgrößeren Vergrößerungsstufe jeweils viermal so hoch wie die vorangehende Vergrößerungsstufe. Bei Vergrößerungsstufe 1 besteht die Karte beispielsweise aus vier Kacheln mit den Maßen 256x256 Pixel, die zusammen eine Pixelgröße von 512x512 ergeben. Bei Vergrößerungsstufe 19 kann jeder Pixel x und y auf der Karte mithilfe eines Wertes zwischen 0 und 256 * 219 referenziert werden.

Da wir den Weltkoordinaten die Kachelgröße der Karte zugrunde legen, wird mit dem Ganzzahlwert einer Pixelkoordinate der exakte Pixel an diesem Ort in der aktuellen Vergrößerungsstufe identifiziert. Beachten Sie, dass die Pixelkoordinaten bei Vergrößerungsstufe 0 mit den Weltkoordinaten übereinstimmen.

Wir haben jetzt eine Möglichkeit, jeden Ort auf der Karte bei jeder Vergrößerungsstufe genau zu bezeichnen. Von Maps API wird ein Viewport ausgehend von der Vergrößerungsstufe in der Mitte der Karte (als Wert LatLng) und der Größe des enthaltenden DOM-Elements erstellt, und diese Grenzen werden in Pixelkoordinaten übersetzt. Die API bestimmt dann logisch alle Kartenkacheln, die innerhalb der genannten Pixelgrenzen liegen. Jede dieser Kartenkacheln wird mithilfe von Kachelkoordinaten referenziert, wodurch das Anzeigen von Kartenbildern erheblich vereinfacht wird.

Kachelkoordinaten

Es wäre vermutlich nicht möglich, mit Google Maps API alle der sinnvollsten Kartenbilder in den höheren Vergrößerungsstufen zu laden; stattdessen werden die Bilder in Maps API in jeder Vergrößerungsstufe in einen Satz quadratischer Kartenkacheln unterteilt, die in einem Raster angeordnet sind. Wird eine Karte an eine neue Position verschoben oder eine neue Vergrößerungsstufe aufgerufen, wird durch Maps API anhand der Pixelkoordinaten ermittelt, welche Kacheln erforderlich sind, und diese Werte werden dann in einen abzurufenden Kachelsatz übersetzt. Diese Kachelkoordinaten werden mithilfe eines Schemas zugewiesen. Anhand dieses Schemas kann auf eine einfache logische Weise ermittelt werden, welche Kachel die Bilder für einen beliebigen Punkt enthält.

Kacheln in Google Maps sind anhand desselben Ursprungs nummeriert wie der Ursprung der Pixel. Bei der Google-Implementierung der Mercator-Projektion befindet sich die Ursprungskachel sich immer in der nordwestlichen Ecke der Karte, wobei die x-Werte von West nach Ost und die y-Werte von Nord nach Süd ansteigen. Kacheln werden mithilfe der Koordinaten x,y dieses Ursprungs indiziert. Bei Vergrößerungsstufe 2 wird die Erde beispielsweise in 16 Kacheln unterteilt; auf jede Kachel kann durch ein eindeutiges Paar x,y verwiesen werden:

Hinweis: Indem Sie die Pixelkoordinaten durch die Kachelgröße teilen und die Ganzzahlteile des Ergebnisses nehmen, erhalten Sie als Nebenergebnis die Kachelkoordinaten für die aktuelle Vergrößerungsstufe.

Im folgenden Beispiel werden die Koordinaten – die Werte LatLng, die Weltkoordinaten, die Pixelkoordinaten und die Kachelkoordinaten – für Chicago, Illinois, bei verschiedenen Vergrößerungsstufen angezeigt:

Beispiel anzeigen (map-coordinates.html)

Die Schnittstelle MapType

Für benutzerdefinierte Kartentypen muss die Schnittstelle MapType implementiert werden. Diese Schnittstelle definiert bestimmte Eigenschaften und Methoden, mit denen Ihre Kartentypen von der API angefordert werden können, wenn durch die API ermittelt wird, dass Kartenkacheln im aktuellen Viewport bei der aktuellen Vergrößerungsstufe angezeigt werden sollen. Sie verarbeiten diese Anforderungen, um zu bestimmen, welche Kacheln zu laden sind.

Hinweis: Um diese Schnittstelle zu implementieren, können Sie Ihre eigene Klasse erstellen oder – wenn Ihre Bilder kompatibel sind – die Klasse ImageMapType verwenden, in der diese Schnittstelle bereits implementiert ist.)

Für Klassen, die die Schnittstelle MapType implementieren, müssen Sie die folgenden Eigenschaften definieren und mit Werten versehen:

  • tileSize (erforderlich): Gibt die Größe der Kachel an (vom Typ google.maps.Size). Größen müssen rechteckig, aber nicht quadratisch sein.
  • maxZoom (erforderlich): Gibt die maximale Vergrößerungsstufe an, mit der Kacheln dieses Kartentyps angezeigt werden können.
  • minZoom (optional): Gibt die minimale Vergrößerungsstufe an, mit der Kacheln dieses Kartentyps angezeigt werden können. Standardmäßig ist dieser Wert 0, was bedeutet, dass keine minimale Vergrößerungsstufe besteht.
  • name (optional): Gibt den Namen für diesen Kartentyp an. Diese Eigenschaft ist nur erforderlich, wenn diese Karte innerhalb eines Steuerelementes „MapType“ auswählbar sein soll. (Siehe nachfolgenden Abschnitt MapType-Steuerelemente hinzufügen.)
  • alt (optional): Gibt den Ersatztext für diesen Kartentyp an, der als Hovertext angezeigt wird. Diese Eigenschaft ist nur erforderlich, wenn diese Karte innerhalb eines Steuerelementes „MapType“ auswählbar sein soll. (Siehe nachfolgenden Abschnitt Steuerelemente vom Typ MapType hinzufügen.)

Darüber hinaus müssen Klassen, die die Schnittstelle MapType implementieren, folgende Methoden implementieren:

  • getTile() (erforderlich): Wird jedes Mal aufgerufen, wenn von der API ermittelt wird, dass die Karte neue Kacheln für den jeweiligen Viewport anzeigen muss. Die Methode getTile() muss folgende Signatur aufweisen:

    getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node

    Ob die Methode getTile() aufgerufen werden muss, wird von der API anhand der MapType-Eigenschaften tileSize, minZoom und maxZoom sowie dem aktuellen Viewport und der aktuellen Vergrößerungsstufe ermittelt. Vom Handler dieser Methode sollte ein HTML-Element gemäß einer übergebenen Koordinate, die Vergrößerungsstufe und ein DOM-Element, an welches das Kachelbild angehängt wird, übergeben werden.

  • releaseTile() (optional): Wird jedes Mal aufgerufen, wenn von der API ermittelt wird, dass die Karte eine Kachel entfernen muss, da diese nicht mehr angezeigt wird. Die Methode muss folgende Signatur aufweisen:

    releaseTile(tile:Node)

    In der Regel sollten Sie das Entfernen aller Elemente durchführen, die zum Zeitpunkt des Hinzufügens der Karte an die Kartenkacheln angefügt waren. Wenn Sie beispielsweise Ereignislistener an Kartenkachelüberlagerungen angefügt haben, sollten Sie diese hier entfernen.

Die Methode getTile() fungiert als Hauptcontroller für die Ermittlung, welche Kacheln für den jeweiligen Viewport zu laden sind.

Basiskartentypen

Kartentypen, die Sie auf diese Weise erstellen, können entweder eigenständig sein oder in Verbindung mit anderen Kartentypen als Überlagerungen eingesetzt werden. Eigenständige Kartentypen werden als Basiskartentypen bezeichnet. Es kann ggf. sinnvoll sein, dass diese benutzerdefinierten Kartentypen (MapType) in der API genau wie andere vorhandene Basiskartentypen (z. B. ROADMAP, TERRAIN) behandelt werden. Fügen Sie dazu Ihren benutzerdefinierten Kartentyp (MapType) zur Eigenschaft mapTypes der Karte (Map) hinzu. Diese Eigenschaft ist vom Typ MapTypeRegistry.

Mit dem nachfolgenden Code wird ein Basiskartentyp (MapType) erstellt, mit dem die Koordinaten der Kartenkacheln angezeigt werden und eine Rahmenlinie um die Kacheln gezeichnet wird:

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

/**
 * @constructor
 * @implements {google.maps.MapType}
 */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.maxZoom = 19;
CoordMapType.prototype.name = 'Tile #s';
CoordMapType.prototype.alt = 'Tile Coordinate Map Type';

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  div.style.backgroundColor = '#E5E3DF';
  return div;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650},
    streetViewControl: false,
    mapTypeId: 'coordinate',
    mapTypeControlOptions: {
      mapTypeIds: ['coordinate', google.maps.MapTypeId.ROADMAP],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  });

  map.addListener('maptypeid_changed', function() {
    var showStreetViewControl = map.getMapTypeId() !== 'coordinate';
    map.setOptions({
      streetViewControl: showStreetViewControl
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set('coordinate',
                   new CoordMapType(new google.maps.Size(256, 256)));
}

Beispiel anzeigen (maptype-base.html).

Überlagerungskartentypen

Einige Kartentypen sind dazu vorgesehen, über vorhandenen Kartentypen eingesetzt zu werden. Diese Kartentypen können beispielsweise über transparente Ebenen mit Sehenswürdigkeiten verfügen oder dem Benutzer zusätzliche Informationen anzeigen. (Die Traffic-Ebene in Google ist ein Beispiel für diesen Kartentyp.)

In diesem Fällen empfiehlt es sich, den Kartentyp nicht als eigenständige Einheit zu behandeln. Stattdessen können Sie diesen Kartentyp direkt zu einem vorhandenen MapType hinzufügen, indem Sie die Eigenschaft overlayMapTypes der Karte (Map) verwenden. Diese Eigenschaft enthält einen Array MVCArray mit Kartentypen (MapTypes). Alle Kartentypen (Basis- und Überlagerungskartentypen) werden innerhalb der Ebene mapPane wiedergegeben. Überlagerungskartentypen werden über sämtlichen Basiskarten angezeigt, an die sie angefügt sind; die Reihenfolge entspricht dabei der Auflistung im Array Map.overlayMapTypes.

Das nachfolgende Beispiel stimmt mit dem vorangehenden Beispiel überein; es wurde lediglich eine Kachelüberlagerung MapType über dem Kartentyp ROADMAP erstellt:

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

/** @constructor */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  return div;
};

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

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
      0, new CoordMapType(new google.maps.Size(256, 256)));
}

Beispiel anzeigen (maptype-overlay.html).

Bildkartentypen

Die Implementierung eines Kartentyps (MapType) als Basiskartentyp kann zeit- und arbeitsintensiv sein. In der API ist eine spezielle Klasse verfügbar, mit der die Schnittstelle MapType für die meisten gängigen Kartentypen implementiert wird: Kartentypen, die aus Kacheln bestehen, die sich aus einzelnen Bilddateien zusammensetzen.

Diese Klasse ImageMapType wird mithilfe einer Objektspezifikation ImageMapTypeOptions erstellt, mit der die folgenden Eigenschaften definiert werden:

  • tileSize (erforderlich): Gibt die Größe der Kachel an (vom Typ google.maps.Size). Größen müssen rechteckig, aber nicht quadratisch sein.
  • getTileUrl (erforderlich): Gibt die Funktion an, in der Regel in Form eines Inline-Funktionsliterals, mit der die Auswahl der geeigneten Bildkachel basierend auf der Angabe der Weltkoordinaten und der Vergrößerungsstufe verarbeitet wird.

Mit dem nachfolgenden Code wird ein Basisbildkartentyp (ImageMapType) mithilfe der Mondkacheln von Google implementiert. In diesem Beispiel wird eine Normalisierungsfunktion verwendet, um sicherzustellen, dass die Kacheln sich auf der X-Achse, aber nicht auf der Y-Achse wiederholen.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ['moon']
    }
  });

  var moonMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
          return null;
        }
        var bound = Math.pow(2, zoom);
        return '//mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
            '/' + zoom + '/' + normalizedCoord.x + '/' +
            (bound - normalizedCoord.y - 1) + '.jpg';
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    radius: 1738000,
    name: 'Moon'
  });

  map.mapTypes.set('moon', moonMapType);
  map.setMapTypeId('moon');
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  var y = coord.y;
  var x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  var tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = (x % tileRange + tileRange) % tileRange;
  }

  return {x: x, y: y};
}

Beispiel anzeigen (maptype-image.html).

Projektionen

Die Erde ist eine (annähernd) dreidimensionale Kugel, während eine Karte eine flache, zweidimensionale Fläche ist. Die Karte, die Ihnen in Google Maps API angezeigt wird, ist – wie jede flache Karte der Erde – eine Projektion dieser Kugel auf einer flachen Oberfläche. Stark vereinfacht kann man eine Projektion als Zuordnung von Breiten-/Längenwerten zu den Koordinaten der Karte der Projektion definieren.

Für Projektionen in Google Maps API muss die Schnittstelle Projection implementiert sein. Die Implementierung von Projection muss nicht nur die Zuordnung zweier Koordinatensysteme umfassen, sondern auch eine bidirektionale Zuordnung. Sie müssen also definieren, wie die Koordinaten der Erde (LatLng) in das Weltkoordinatensystem der Projektion (Projection) übersetzt werden und umgekehrt. In Google Maps wird die Mercator-Projektion verwendet, um Karten aus geografischen Daten zu erstellen und Ereignisse auf der Karte in geografische Koordinaten umzuwandeln. Um diese Projektion zu erhalten, rufen Sie getProjection() in der Karte (Map) (oder einem beliebigen Standardbasiskartentyp MapType) auf. In den meisten Fällen reicht die Standardprojektion (Projection) aus; Sie können jedoch bei Bedarf auch benutzerdefinierte Projektionen selbst erstellen und verwenden.

Projektionen implementieren

Bei der Implementierung einer benutzerdefinierten Projektion müssen Sie einige Punkte definieren:

  • Die Formeln für die Zuordnung von Breiten- und Längenkoordinaten zu einer Kartesischen Fläche und umgekehrt. (Von der Schnittstelle Projection werden ausschließlich Umwandlungen in geradlinige Koordinaten unterstützt.)
  • Die Basiskachelgröße. Alle Kacheln müssen rechteckig sein.
  • Die „Weltgröße“ einer Karte unter Verwendung des Basiskachelsatzes bei Vergrößerungsstufe 0. Beachten Sie, dass bei Karten, die bei Vergrößerungsstufe 0 aus einer Kachel bestehen, Weltgröße und Basiskachelgröße identisch sind.

Koordinatenumwandlungen in Projektionen

Für jede Projektion gibt es zwei Methoden zur Übersetzung zwischen diesen beiden Koordinatensystemen, um geografische und Weltkoordinaten umzuwandeln.

  • Mit der Methode Projection.fromLatLngToPoint() wird ein Wert LatLng in eine Weltkoordinate umwandelt. Mithilfe dieser Methode werden Überlagerungen auf der Karte platziert (sowie die Karte selbst).
  • Mit der Methode Projection.fromPointToLatLng() wird eine Weltkoordinate in einen Wert LatLng umwandelt. Diese Methode wird verwendet, um Ereignisse, z. B. Klicks, die auf einer Karte erfolgen, in geografische Koordinaten umzuwandeln.

In Google Maps wird vorausgesetzt, dass Projektionen geradlinig sind.

Sie können eine Projektion generell für zwei Fälle einsetzen: um eine Karte der Welt oder um eine Karte eines örtlichen Bereichs zu erstellen. Im ersten Fall sollten Sie sicherstellen, dass Ihre Projektion für alle Längenwerte geradlinig und normal ist. Einige Projektionen (insbesondere konische Projektionen) können „örtlich normal“ sein (d. h. nach Norden zeigen), jedoch vom geografischen Norden abweichen; beispielsweise, je stärker die Karte relativ zu einem Referenzlängenwert positioniert ist. Die können Projektionen wie diese lokal einsetzen, beachten Sie jedoch, dass die Projektion gezwungenermaßen unpräzise ist; Umwandlungsfehler werden immer deutlicher, je weiter sie sich vom Referenzlängenwert entfernt, den Sie abweichend vorgegeben haben.

Auswahl von Kartenkacheln in Projektionen

Projektionen werden nicht nur verwendet, um die Positionen von Standorten oder Überlagerungen zu bestimmen, sondern dienen auch zur Positionierung der Kartenkacheln selbst. Mit Maps API werden die Karten mithilfe einer Schnittstelle MapType wiedergegeben; diese muss sowohl eine Eigenschaft projection zur Kennzeichnung der Kartenprojektion als auch eine Methode getTile() zum Abrufen der Kartenkacheln basierend auf den Werten der Kachelkoordinaten deklarieren. Kachelkoordinaten basieren sowohl auf Ihrer Basiskachelgröße (Kacheln müssen rechteckig sein) als auch auf der „Weltgröße“ Ihrer Karte, also der Pixelgröße Ihrer Karte bei Vergrößerungsstufe 0. (Bei Karten, die bei Vergrößerungsstufe 0 aus einer Kachel bestehen, sind Weltgröße und Basiskachelgröße identisch.)

Sie definieren die Basiskachelgröße in der MapType-Eigenschaft tileSize. Sie definieren die Weltgröße implizit in den Methoden fromLatLngToPoint() und fromPointToLatLng() Ihrer Projektion.

Da die Bildauswahl von diesen übergebenen Werten abhängt, ist es sinnvoll, Bilder, die programmgesteuert mit diesen übergebenen Werten ausgewählt werden können, entsprechend zu benennen, z. B. map_zoom_tileX_tileY.png.

In nachfolgenden Beispiel ist ein Bildkartentyp (ImageMapType) mithilfe der Gall-Peters-Projektion definiert:

// This example defines an image map type using the Gall-Peters projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection

function initMap() {
  // Create a map. Use the Gall-Peters map type.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 0,
    center: {lat: 0, lng: 0},
    mapTypeControl: false
  });

  initGallPeters();
  map.mapTypes.set('gallPeters', gallPetersMapType);
  map.setMapTypeId('gallPeters');

  // Show the lat and lng under the mouse cursor.
  var coordsDiv = document.getElementById('coords');
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener('mousemove', function(event) {
    coordsDiv.textContent =
        'lat: ' + Math.round(event.latLng.lat()) + ', ' +
        'lng: ' + Math.round(event.latLng.lng());
  });

  // Add some markers to the map.
  map.data.setStyle(function(feature) {
    return {
      title: feature.getProperty('name'),
      optimized: false
    };
  });
  map.data.addGeoJson(cities);
}

var gallPetersMapType;
function initGallPeters() {
  var GALL_PETERS_RANGE_X = 800;
  var GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var scale = 1 << zoom;

      // Wrap tiles horizontally.
      var x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      var y = coord.y;
      if (y < 0 || y >= scale) return null;

      return 'images/gall-peters_' + zoom + '_' + x + '_' + y + '.png';
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    isPng: true,
    minZoom: 0,
    maxZoom: 1,
    name: 'Gall-Peters'
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function(latLng) {
      var latRadians = latLng.lat() * Math.PI / 180;
      return new google.maps.Point(
          GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
          GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)));
    },
    fromPointToLatLng: function(point, noWrap) {
      var x = point.x / GALL_PETERS_RANGE_X;
      var y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

      return new google.maps.LatLng(
          Math.asin(1 - 2 * y) * 180 / Math.PI,
          -180 + 360 * x,
          noWrap);
    }
  };
}

// GeoJSON, describing the locations and names of some cities.
var cities = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-87.650, 41.850]},
    properties: {name: 'Chicago'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-149.900, 61.218]},
    properties: {name: 'Anchorage'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-99.127, 19.427]},
    properties: {name: 'Mexico City'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [-0.126, 51.500]},
    properties: {name: 'London'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [28.045, -26.201]},
    properties: {name: 'Johannesburg'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [15.322, -4.325]},
    properties: {name: 'Kinshasa'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [151.207, -33.867]},
    properties: {name: 'Sydney'}
  }, {
    type: 'Feature',
    geometry: {type: 'Point', coordinates: [0, 0]},
    properties: {name: '0°N 0°E'}
  }]
};

Beispiel anzeigen (map-projection-simple.html).

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API