Omówienie
Możesz ustawić pochylenie i obrót (nagłówek) na mapie wektorowej.
uwzględniając właściwości heading
i tilt
podczas inicjowania mapy oraz
po wywołaniu na mapie metod setTilt
i setHeading
. Poniżej
Przykład dodaje do mapy kilka przycisków, które pozwalają automatycznie dostosować przechylenie.
i nagłówek w odstępach co 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> <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 script 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>
Zobacz próbkę
Korzystanie z gestów myszy i klawiatury
Jeśli zostały włączone interakcje użytkownika dotyczące przechylania i obracania (nagłówka) automatycznie lub w konsoli Google Cloud), użytkownicy mogą dostosować przechylenie i obracania za pomocą myszy i klawiatury:
- Za pomocą myszy przytrzymaj naciśnięty klawisz Shift, a następnie kliknij i przeciągnij w górę i w dół, aby dostosować przechylenie, a w prawo i w lewo, aby dostosować kierunek.
- Na klawiaturze przytrzymaj klawisz Shift, a następnie użyj klawiszy strzałek w górę i w dół Użyj klawiszy strzałek, by dostosować nachylenie, oraz klawiszy strzałek w prawo i w lewo, by dostosować nagłówek.
Automatyczne dostosowywanie przechylenia i kierunku
Za pomocą metod setTilt()
i setHeading()
możesz automatycznie dostosowywać pochylenie
i kierunku na mapie wektorowej. Nagłówek to kierunek, w którym jest zwrócony aparat
stopni w kierunku północnym, więc map.setHeading(90)
będzie obracać mapę
tak by wschód był zwrócony do góry. Kąt nachylenia jest mierzony od zenitu, więc
map.setTilt(0)
patrzy prosto w dół, a map.setTilt(45)
będzie widzieć wynik
w widoku ukośnym.
- Wywołaj funkcję
setTilt()
, aby ustawić kąt nachylenia mapy. Użyj kodugetTilt()
, aby uzyskać bieżącej wartości pochylenia. - Wywołaj
setHeading()
, aby ustawić nagłówek mapy. UżyjgetHeading()
, aby otrzymać bieżącej wartości nagłówka.
Aby zmienić środek mapy przy zachowaniu przechylenia i kierunku, użyj funkcji
map.setCenter()
lub map.panBy()
.
Zwróć uwagę, że zakres kątów, które możesz zastosować, różni się w zależności od obecnego powiększenia. na poziomie 300%. Wartości spoza tego zakresu zostaną zmienione na obecnie dozwolone zakres dat.
Możesz też użyć metody moveCamera
, aby automatycznie zmienić nagłówek,
możesz przechylić, wyśrodkować i powiększyć. Więcej informacji
Wpływ na inne metody
Po zastosowaniu przechylenia lub obrotu do mapy działanie innych interfejsów Maps JavaScript API metod, które wpływają na:
map.getBounds()
zawsze zwraca najmniejszą ramkę ograniczającą, która zawiera widoczny obszar; po zastosowaniu przechylenia zwrócone granice mogą przedstawiać jest większy niż obszar widoczny w widoku mapy.map.fitBounds()
zresetuje pochylenie i kierunek do zera przed dopasowaniem granic.map.panToBounds()
zresetuje pochylenie i kierunek do zera przed przesunięciem granic.map.setTilt()
akceptuje dowolną wartość, ale ogranicza maksymalne pochylenie na podstawie aktualnego poziomu powiększenia mapy.map.setHeading()
akceptuje dowolną wartość i będzie ją modyfikować, aby dopasować do zakres [0, 360].