Opis
Możesz ustawić przechylenie i obrót (nagłówek) na mapie wektorowej, uwzględniając właściwości heading
i tilt
podczas inicjowania mapy oraz wywołując na mapie metody setTilt
i setHeading
. W poniższym przykładzie dodaliśmy do mapy kilka przycisków, które automatycznie dostosowują przechylenie i kierunek w krokach 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> <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
Za pomocą myszy i klawiatury możesz dostosować przechylenie i obrót:
- Za pomocą myszy przytrzymaj naciśnięty klawisz Shift, a następnie kliknij i przeciągnij myszą w górę i w dół, aby dostosować pochylenie, oraz w prawo i w lewo, aby dostosować kierunek.
- Za pomocą klawiatury przytrzymaj klawisz Shift, a następnie za pomocą klawiszy strzałek w górę i w dół dostosuj przechylenie oraz użyj klawiszy strzałek w prawo i w lewo do dostosowania kierunku.
Automatyczne dostosowywanie pochylenia i kierunku
Użyj metod setTilt()
i setHeading()
, aby automatycznie dostosować przechylenie i kierunek na mapie wektorowej. Kierunek to kierunek, w którym kamera jest skierowana w prawo, zaczynając od północy, więc map.setHeading(90)
obróci mapę tak, aby wschód był skierowany do góry. Kąt nachylenia jest mierzony od zenitu, więc element map.setTilt(0)
patrzy prosto w dół, a map.setTilt(45)
daje ukośny widok.
- Wywołaj
setTilt()
, aby ustawić kąt pochylenia mapy. Użyj funkcjigetTilt()
, aby pobrać aktualną wartość pochylenia. - Wywołaj
setHeading()
, aby ustawić nagłówek mapy. UżyjgetHeading()
, aby pobrać bieżącą wartość nagłówka.
Aby zmienić środek mapy przy zachowaniu przechylenia i kierunku, użyj właściwości map.setCenter()
lub map.panBy()
.
Pamiętaj, że dostępny zakres kątów zależy od obecnego powiększenia. Wartości spoza tego zakresu będą ograniczane 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
Zastosowanie do mapy przechylenia lub obrotu wpływa na działanie innych metod interfejsu Maps JavaScript API:
map.getBounds()
zawsze zwraca najmniejszą ramkę ograniczającą, która obejmuje 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 do zera. - Przed przesunięciem granic funkcja
map.panToBounds()
zresetuje przechylenie i kierunek do zera. map.setTilt()
akceptuje dowolną wartość, ale ogranicza maksymalne nachylenie w zależności od obecnego powiększenia mapy.map.setHeading()
akceptuje dowolną wartość i zmienia ją, aby mieściła się w zakresie [0–360].