Die Maps JavaScript API bietet zwei verschiedene Kartenimplementierungen: Raster und Vektor. Standardmäßig wird die Rasterkarte geladen. Sie besteht aus einem Raster pixelbasierter Bildkacheln, die von der Google Maps Platform serverseitig generiert und dann an Ihre Webanwendung übergeben werden. Die Vektorkarte besteht aus vektorbasierten Kacheln, die beim Laden clientseitig mit WebGL erstellt werden. WebGL ist eine Webtechnologie, mit der der Browser auf die GPU des Geräts des Nutzers zugreifen kann, um 2D- und 3D-Grafiken zu rendern.
Die Vektorkarte entspricht der Google-Karte, mit der Ihre Nutzer vertraut sind. Sie bietet eine Reihe von Vorteilen gegenüber der standardmäßigen Rasterkarte, allen voran die Schärfe der vektorbasierten Bilder und die Möglichkeit der Darstellung von 3D-Gebäuden in hohen Zoomstufen. Außerdem unterstützt die Vektorkarte einige neue Funktionen, z. B. die Möglichkeit, 3D-Inhalte mit WebGL Overlay View hinzuzufügen sowie Neigung und Ausrichtung programmatisch zu steuern, eine verbesserte Kamerasteuerung und Bruchwerte für flüssigeres Zoomen.
Erste Schritte mit Vektorkarten
Kamera steuern
Mit der Funktion map.moveCamera() können Sie eine beliebige Kombination von Kameraeigenschaften auf einmal aktualisieren. Für map.moveCamera() kann ein einzelner Parameter angegeben werden, der alle Kameraeigenschaften enthält, die aktualisiert werden sollen. Im folgenden Beispiel wird map.moveCamera() aufgerufen, um gleichzeitig center, zoom, heading und tilt festzulegen:
map.moveCamera({
center: new google.maps.LatLng(37.7893719, -122.3942),
zoom: 16,
heading: 320,
tilt: 47.5
});
Sie können Kameraeigenschaften animieren, indem Sie map.moveCamera() mit einer Animationsschleife aufrufen:
const degreesPerSecond = 3;
function animateCamera(time) {
// Update the heading, leave everything else as-is.
map.moveCamera({
heading: (time / 1000) * degreesPerSecond
});
requestAnimationFrame(animateCamera);
}
// Start the animation.
requestAnimationFrame(animateCamera);
Zoomen nach Bruchwerten
In Vektorkarten ist das Zoomen nach Bruchwerten anstelle von Ganzzahlen möglich. Die Funktion ist sowohl für Raster- als auch Vektorkarten verfügbar, im Gegensatz zu Rasterkarten ist sie bei Vektorkarten aber standardmäßig aktiviert. Verwenden Sie die Option isFractionalZoomEnabled, um die Funktion zum Zoomen nach Bruchwerten zu aktivieren oder deaktivieren.
Im folgenden Beispiel wird das Zoomen nach Bruchwerten beim Initialisieren der Karte aktiviert:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
isFractionalZoomEnabled: true
});
Das Zoomen nach Bruchwerten lässt sich auch aktivieren und deaktivieren, indem die Option isFractionalZoomEnabled so festgelegt wird:
// Using map.set
map.set('isFractionalZoomEnabled', true);
// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});
Sie können einen Listener einrichten, der erfasst, ob das Zoomen nach Bruchwerten aktiviert ist. Dies ist vor allem dann sinnvoll, wenn Sie isFractionalZoomEnabled nicht explizit auf true oder false gesetzt haben. Mit dem folgenden Beispielcode wird geprüft, ob das Zoomen nach Bruchwerten aktiviert ist:
map.addListener('isfractionalzoomenabled_changed', () => {
const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
if (isFractionalZoomEnabled === false) {
console.log('not using fractional zoom');
} else if (isFractionalZoomEnabled === true) {
console.log('using fractional zoom');
} else {
console.log('map not done initializing yet');
}
});