Przegląd
Możesz ustawić przechylenie i obrót (nagłówek) dla mapy wektorowej, dodając właściwości heading
i tilt
podczas inicjowania mapy oraz wywołując na mapie metody setTilt
i setHeading
. Poniższy przykład pokazuje dodanie do mapy kilku przycisków, które pokazują automatyczne dostosowywanie przechylenia i kierunku o 20 stopni.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: { lat: 37.7893719, lng: -122.3942, }, zoom: 16, heading: 320, tilt: 47.5, mapId: "90f87356969d889c", } ); const buttons: [string, string, number, google.maps.ControlPosition][] = [ ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER], ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER], ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER], ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER], ]; buttons.forEach(([text, mode, amount, position]) => { const controlDiv = document.createElement("div"); const controlUI = document.createElement("button"); controlUI.classList.add("ui-button"); controlUI.innerText = `${text}`; controlUI.addEventListener("click", () => { adjustMap(mode, amount); }); controlDiv.appendChild(controlUI); map.controls[position].push(controlDiv); }); const adjustMap = function (mode: string, amount: number) { switch (mode) { case "tilt": map.setTilt(map.getTilt()! + amount); break; case "rotate": map.setHeading(map.getHeading()! + amount); break; default: break; } }; } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 37.7893719, lng: -122.3942, }, zoom: 16, heading: 320, tilt: 47.5, mapId: "90f87356969d889c", }); const buttons = [ ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER], ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER], ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER], ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER], ]; buttons.forEach(([text, mode, amount, position]) => { const controlDiv = document.createElement("div"); const controlUI = document.createElement("button"); controlUI.classList.add("ui-button"); controlUI.innerText = `${text}`; controlUI.addEventListener("click", () => { adjustMap(mode, amount); }); controlDiv.appendChild(controlUI); map.controls[position].push(controlDiv); }); const adjustMap = function (mode, amount) { switch (mode) { case "tilt": map.setTilt(map.getTilt() + amount); break; case "rotate": map.setHeading(map.getHeading() + amount); break; default: break; } }; } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } .ui-button { background-color: #fff; border: 0; border-radius: 2px; box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); margin: 10px; padding: 0 0.5em; font: 400 18px Roboto, Arial, sans-serif; overflow: hidden; height: 40px; cursor: pointer; } .ui-button:hover { background: rgb(235, 235, 235); }
HTML
<html> <head> <title>Tilt and Rotation</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Wypróbuj fragment
Używanie gestów myszy i klawiatury
Jeśli włączono interakcje użytkowników z użytkownikiem w zakresie pochylania i obracania (kierunku) (programowo lub w konsoli Google Cloud), użytkownicy mogą dostosowywać przechylanie i obrót za pomocą myszy i klawiatury:
- Za pomocą myszy przytrzymaj naciśnięty klawisz Shift, a następnie kliknij i przeciągnij myszką w górę i w dół, aby dostosować nachylenie, oraz w prawo i w lewo, aby dostosować kierunek.
- Na klawiaturze przytrzymaj naciśnięty klawisz Shift, a następnie za pomocą klawiszy strzałek w górę i w dół dostosuj przechylenie. Strzałki w prawo i w lewo dostosuj kierunek.
Automatyczne dostosowywanie pochylenia i kierunku
Aby automatycznie dostosować przechylenie i kierunek na mapie wektorowej, użyj metod setTilt()
i setHeading()
. Kierunek to kierunek, w którym kamera jest skierowana w prawo, zaczynając od północy. map.setHeading(90)
obróci mapę tak, aby wschód był skierowany do góry. Kąt nachylenia jest mierzony w zenicie, więc map.setTilt(0)
patrzy prosto w dół, a map.setTilt(45)
daje widok skośny.
- Wywołaj
setTilt()
, aby ustawić kąt pochylenia mapy. Aby pobrać aktualną wartość pochylenia, użyj funkcjigetTilt()
. - Wywołaj
setHeading()
, aby ustawić nagłówek mapy. Aby pobrać bieżącą wartość nagłówka, użyj parametrugetHeading()
.
Aby zmienić środek mapy przy zachowaniu przechylenia i kierunku, użyj elementów map.setCenter()
lub map.panBy()
.
Pamiętaj, że zakres dostępnych kątów powiększenia różni się w zależności od bieżącego poziomu powiększenia. Wartości spoza tego zakresu zostaną ograniczone do aktualnie dozwolonego zakresu.
Możesz też użyć metody moveCamera
, aby automatycznie zmienić kierunek, przechylenie, wyśrodkować i powiększyć. Więcej informacji
Wpływ na inne metody
Po zastosowaniu do mapy przechylenia lub obrotu wpływa to na działanie innych metod interfejsu Maps JavaScript API:
- Funkcja
map.getBounds()
zawsze zwraca najmniejszą ramkę ograniczającą, która zawiera widoczny obszar. Po zastosowaniu przechylenia zwrócone granice mogą przedstawiać większy obszar niż widoczny obszar widocznego obszaru mapy. - Przed dopasowaniem granic funkcja
map.fitBounds()
zresetuje przechylenie i kierunek na 0. - Przed przesuwaniem granic funkcja
map.panToBounds()
zresetuje przechylenie i kierunek na zero. map.setTilt()
akceptuje dowolną wartość, ale ogranicza maksymalne nachylenie mapy zgodnie z bieżącym poziomem powiększenia mapy.map.setHeading()
akceptuje dowolną wartość i zmodyfikuje ją, aby mieściła się w zakresie [0–360].