Panoramica
Puoi impostare l'inclinazione e la rotazione (intestazione) sulla mappa vettoriale
includendo le proprietà heading
e tilt
durante l'inizializzazione della mappa e
chiamando i metodi setTilt
e setHeading
sulla mappa. Nell'esempio
seguente vengono aggiunti alla mappa alcuni pulsanti che mostrano la regolazione programmatica dell'inclinazione
e dell'orientamento con incrementi di 20 gradi.
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>
Prova Sample
Uso dei gesti del mouse e della tastiera
Se le interazioni degli utenti di inclinazione e rotazione (intestazione) sono state attivate (in modo programmatico o nella console Google Cloud), gli utenti possono regolare l'inclinazione e la rotazione utilizzando mouse e tastiera:
- Utilizzando il mouse, tieni premuto il tasto Maiusc, quindi fai clic e trascina il mouse verso l'alto e verso il basso per regolare l'inclinazione, oppure verso destra e sinistra per regolare l'intestazione.
- Con la tastiera, tieni premuto il tasto Maiusc, quindi utilizza i tasti Freccia su e Freccia giù per regolare l'inclinazione e i tasti Freccia destra e sinistra per regolare l'intestazione.
Regolazione programmatica di inclinazione e intestazione
Utilizza i metodi setTilt()
e setHeading()
per regolare in modo programmatico l'inclinazione e l'orientamento su una mappa vettoriale. L'orientamento è la direzione in cui la fotocamera è rivolta
in senso orario partendo da nord, quindi map.setHeading(90)
ruoterà la mappa
in modo che sia rivolta verso l'alto. L'angolo di inclinazione viene misurato dallo zenit, quindi map.setTilt(0)
è rivolto verso il basso, mentre map.setTilt(45)
produrrà una vista obliqua.
- Chiama
setTilt()
per impostare l'angolo di inclinazione della mappa. UsagetTilt()
per ottenere il valore di inclinazione attuale. - Chiama
setHeading()
per impostare l'intestazione della mappa. UsagetHeading()
per ottenere il valore dell'intestazione corrente.
Per modificare il centro della mappa mantenendo l'inclinazione e l'orientamento, utilizza map.setCenter()
o map.panBy()
.
Tieni presente che l'intervallo di angolazioni utilizzabili varia in base al livello di zoom corrente. I valori al di fuori di questo intervallo verranno limitati all'intervallo attualmente consentito.
Puoi anche utilizzare il metodo moveCamera
per modificare in modo programmatico intestazione,
inclinazione, centro e zoom. Scopri di più.
Impatto su altri metodi
L'inclinazione o la rotazione applicata alla mappa influisce sul comportamento di altri metodi dell'API Maps JavaScript:
map.getBounds()
restituisce sempre il riquadro di delimitazione più piccolo che include l'area visibile; quando viene applicata l'inclinazione, i limiti restituiti potrebbero rappresentare una regione più ampia di quella dell'area visibile della mappa.map.fitBounds()
reimposterà l'inclinazione e l'orientamento a zero prima di rientrare nei limiti.map.panToBounds()
reimposterà l'inclinazione e l'orientamento a zero prima della panoramica dei limiti.map.setTilt()
accetta qualsiasi valore, ma limita l'inclinazione massima in base al livello di zoom della mappa corrente.map.setHeading()
accetta qualsiasi valore e lo modifica per rientrare nell'intervallo [0, 360].