Interfejs Maps JavaScript API oferuje 2 różne implementacje mapy: rastrową i wektorową. 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.
Mapa wektorowa to ta sama mapa Google, z której użytkownicy już korzystają, i ma wiele zalet w porównaniu z domyślną mapą rastrową, w szczególności ostrość obrazów wektorowych oraz dodanie budynków 3D z bliska. 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ą
Za pomocą funkcji map.moveCamera()
możesz aktualizować dowolną kombinację właściwości aparatu naraz. map.moveCamera()
akceptuje do zaktualizowania 1 parametr zawierający wszystkie właściwości kamery. 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);
Zoom ułamkowy
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, jednak powiększenie cząstkowe jest domyślnie włączone w przypadku map wektorowych i domyślnie wyłączone w przypadku map rastrowych. Aby włączyć lub wyłączyć częściowe powiększenie, użyj opcji mapy isFractionalZoomEnabled
.
Poniższy przykład pokazuje włączanie częściowego powiększenia podczas inicjowania mapy:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
isFractionalZoomEnabled: true
});
Możesz również włączyć lub wyłączyć powiększenie cząstkowe, ustawiając opcję mapy isFractionalZoomEnabled
w następujący sposób:
// Using map.set
map.set('isFractionalZoomEnabled', true);
// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});
Możesz skonfigurować detektor, aby wykrywał, czy włączone jest powiększenie cząstkowe. Jest to najbardziej przydatne, gdy isFractionalZoomEnabled
nie ma jednoznacznie ustawionej wartości true
lub false
. Ten przykładowy kod sprawdza, czy jest włączone powiększenie cząstkowe:
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');
}
});