Interfejs Maps JavaScript API udostępnia 2 różne implementacje mapy: rastrową i wektorową. Mapa rastrowa jest domyślnie wczytywana i wczytuje ją jako siatkę obrazów rastrowych opartych na pikselach. Są one generowane po stronie serwera Google Maps Platform, a następnie wyświetlane w aplikacji internetowej. Mapa wektorowa składa się z kafelków wektorowych, które są rysowane w czasie wczytywania po stronie klienta za pomocą technologii WebGL i GPU, która umożliwia przeglądarce renderowanie obrazu przez przeglądarkę.
Mapa wektorowa to ta sama mapa Google, z której korzystają użytkownicy. Ma ona szereg zalet w porównaniu z domyślną mapą rastrową, w szczególności ostrość obrazów wektorowych, a także dodanie budynków 3D przy dużym powiększeniu. Mapa wektorowa obsługuje również nowe funkcje, takie jak możliwość dodawania treści 3D w widoku nakładki WebGL, automatyczne sterowanie przechylaniem i kierunkiem, ulepszone sterowanie aparatem oraz powiększenie cząstkowe umożliwiające płynniejsze powiększanie.
Mapy wektorowe – pierwsze kroki
Sterowanie kamerą
Funkcja map.moveCamera()
pozwala aktualizować dowolne kombinacje właściwości kamery naraz. map.moveCamera()
akceptuje pojedynczy parametr ze wszystkimi właściwościami kamery do zaktualizowania. Ten przykład przedstawia wywołanie map.moveCamera()
w celu ustawienia center
, zoom
, heading
i tilt
jednocześnie:
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 map.moveCamera()
za pomocą pętli animacji, jak na przykładzie poniżej:
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 ułamkowe
Mapy wektorowe obsługują powiększenie ułamkowe, które umożliwia powiększanie za pomocą wartości ułamkowych zamiast liczb całkowitych. Mimo że zarówno mapy rastrowe, jak i wektorowe obsługują powiększenie cząstkowe, powiększenie cząstkowe jest domyślnie włączone w przypadku map wektorowych, a domyślnie wyłączone w przypadku map rastrowych. Aby włączyć lub wyłączyć powiększenie cząstkowe, użyj opcji mapy isFractionalZoomEnabled
.
Poniższy przykład pokazuje włączenie powiększenia częściowego podczas inicjowania mapy:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
isFractionalZoomEnabled: true
});
Możesz też włączyć lub wyłączyć powiększenie cząstkowe, 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ć detektor do wykrywania, czy powiększenie cząstkowe jest włączone. Jest to najbardziej przydatne, jeśli nie ustawisz isFractionalZoomEnabled
na true
lub false
. Ten przykładowy kod pozwala sprawdzić, czy powiększenie cząstkowe jest włączone:
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');
}
});