Interfejs Maps JavaScript API oferuje 2 różne implementacje mapy: rastrową i wektorówą. Mapa rastrowa jest domyślnie wczytywana i wczytuje ją w postaci siatki opartej na pikselach obrazów rastrowych, które są generowane przez serwer Google Maps Platform, a następnie wyświetlane w aplikacji internetowej. Mapa wektorowa składa się z fragmentów wektorowych, które są rysowane w czasie wczytywania po stronie klienta przy użyciu technologii WebGL 2, która umożliwia przeglądarce dostęp do grafiki i GPU 3D na urządzeniu użytkownika.
Wektorowa mapa to ta sama mapa Google, z której korzystają użytkownicy, i oferuje ona wiele zalet w porównaniu z domyślną mapą z płyt rastrowych, w tym przede wszystkim ostrość obrazów wektorowych oraz dodanie budynków 3D na małych poziomach powiększenia. Mapa wektorowa obsługuje też nowe funkcje, takie jak możliwość dodawania treści 3D z widokiem nakładki WebGL, automatyczne przechylanie i sterowanie kierunkiem, ulepszone sterowanie kamerą oraz powiększenie cząstkowe zapewniające płynniejsze powiększanie.
Pierwsze kroki z mapami wektorowymi
Sterowanie kamerą
Aby zaktualizować dowolną kombinację właściwości aparatu naraz, użyj funkcji map.moveCamera()
. map.moveCamera()
przyjmuje jeden parametr zawierający wszystkie właściwości kamery, które mają zostać zaktualizowane. Ten przykład pokazuje wywołanie map.moveCamera()
, aby ustawić jednocześnie center
, zoom
, heading
i tilt
:
map.moveCamera({
center: new google.maps.LatLng(37.7893719, -122.3942),
zoom: 16,
heading: 320,
tilt: 47.5
});
Możesz animować właściwości kamery, wywołując funkcję map.moveCamera()
za pomocą pętli animacji, jak w tym przykładzie:
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);
Powiększenie cząstkowe
Mapy wektorowe obsługują powiększenie cząstkowe, które umożliwia powiększenie z użyciem wartości ułamkowych zamiast liczb całkowitych. Zarówno mapy rastrowe, jak i wektorowe obsługują powiększenie cząstkowe, ale w przypadku map wektorowych jest ono domyślnie włączone, a w przypadku map rastrowych – wyłączone. Aby włączyć lub wyłączyć częściowe powiększenie, użyj opcji mapy isFractionalZoomEnabled
.
Ten przykład pokazuje włączanie powiększenia dziesiętnego podczas inicjowania mapy:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
isFractionalZoomEnabled: true
});
Powiększenie cząstkowe możesz też włączać i wyłączać, ustawiając opcję mapy isFractionalZoomEnabled
w ten sposób:
// Using map.set
map.set('isFractionalZoomEnabled', true);
// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});
Możesz skonfigurować listenera tak, aby wykrywał, czy włączona jest powiększenie cząstkowe. Jest to szczególnie przydatne, jeśli nie ustawisz opcji isFractionalZoomEnabled
na true
lub false
. Poniższy przykładowy kod sprawdza, czy włączone jest powiększanie frakcyjne:
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');
}
});