Mapy wektorowe

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