Panoramica
Puoi impostare l'inclinazione e la rotazione (intestazione) sulla mappa vettoriale
includendo le proprietà heading
e tilt
durante l'inizializzazione della mappa e
richiamando i metodi setTilt
e setHeading
sulla mappa. Le seguenti
esempio aggiunge alla mappa alcuni pulsanti che mostrano la regolazione dell'inclinazione in modo programmatico
e la direzione 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 con inclinazione e rotazione (intestazione) sono state attivate (o in modo programmatico o nella console Google Cloud), gli utenti possono e la rotazione utilizzando il mouse e la tastiera:
- Con 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, verso destra e sinistra per regolare l'orientamento.
- Con la tastiera, tieni premuto il tasto Maiusc, quindi usa i tasti Su e Giù i tasti freccia per regolare l'inclinazione e i tasti freccia destra e sinistra per regolare .
Regolazione programmatica di inclinazione e intestazione
Usa i metodi setTilt()
e setHeading()
per regolare l'inclinazione in modo programmatico
e dirigendoti verso una mappa vettoriale. L'orientamento è la direzione in cui è rivolta la fotocamera
gradi in senso orario partendo da nord, quindi map.setHeading(90)
ruoterà la mappa
in modo che l'est sia rivolto verso l'alto. L'angolo di inclinazione viene misurato dallo zenit, quindi
map.setTilt(0)
guarda in verticale, mentre map.setTilt(45)
risultato
in una vista obliqua.
- Chiama
setTilt()
per impostare l'angolo di inclinazione della mappa. UsagetTilt()
per ottenere valore di inclinazione corrente. - 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 la gamma di angoli utilizzabili varia in base allo zoom corrente livello. I valori al di fuori di questo intervallo verranno applicati ai valori attualmente consentiti intervallo.
Puoi anche usare il metodo moveCamera
per modificare in modo programmatico intestazione,
inclinazione, centro e zoom. Scopri di più.
Impatto su altri metodi
Quando alla mappa vengono applicate l'inclinazione o la rotazione, il comportamento dell'altra API Maps JavaScript di questi metodi:
map.getBounds()
restituisce sempre il riquadro di delimitazione più piccolo che include la regione visibile; quando viene applicata l'inclinazione, i limiti restituiti possono rappresentare una regione più ampia dell'area visibile dell'area visibile della mappa.map.fitBounds()
reimposterà l'inclinazione e la direzione a zero prima di adattarsi al limiti.map.panToBounds()
reimposterà l'inclinazione e la direzione a zero prima della panoramica limiti.map.setTilt()
accetta qualsiasi valore, ma limita l'inclinazione massima in base a l'attuale livello di zoom della mappa.map.setHeading()
accetta qualsiasi valore e lo modificherà per adattarlo al intervallo [0, 360].