Mapy wektorowe

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');
  }
});