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. Il seguente esempio aggiunge alcuni pulsanti alla mappa che mostrano la regolazione programmatica dell'inclinazione e dell'intestazione 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>
<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>
Prova Samples
Utilizzo dei gesti del mouse e della tastiera
Puoi regolare l'inclinazione e la rotazione utilizzando il mouse e la tastiera:
- Utilizzando il mouse, tieni premuto il tasto Maiusc, poi 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.
- Utilizzando la tastiera, tieni premuto il tasto Maiusc, quindi utilizza i tasti freccia su e giù per regolare l'inclinazione e i tasti freccia destra e sinistra per regolare l'orientamento.
Regolazione programmatica dell'inclinazione e dell'intestazione
Utilizza i metodi setTilt() e setHeading() per regolare in modo programmatico l'inclinazione e le intestazioni su una mappa vettoriale. L'orientamento è la direzione in cui la fotocamera è rivolta in senso orario a partire 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 verso il basso, mentre con map.setTilt(45)
viene mostrata una vista obliqua.
- Richiama
setTilt()per impostare l'angolo di inclinazione della mappa. UsagetTilt()per ottenere il 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 inclinazione e orientamento, utilizza
map.setCenter() o map.panBy().
Tieni presente che la gamma di angolazioni utilizzabili varia con il livello di zoom corrente. I valori al di fuori di questo intervallo verranno fissati all'intervallo attualmente consentito.
Puoi anche utilizzare il metodo moveCamera per modificare in modo programmatico intestazione, inclinazione, centratura e zoom. Scopri di più.
Impatto su altri metodi
L'applicazione dell'inclinazione o della rotazione 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 un'area più grande rispetto all'area visibile dell'area visibile della mappa.map.fitBounds()reimposterà l'inclinazione e l'intestazione su zero prima di adattare i limiti.map.panToBounds()reimposterà l'inclinazione e l'intestazione su zero prima di eseguire la panoramica dei limiti.map.setTilt()accetta qualsiasi valore, ma limita l'inclinazione massima in base al livello di zoom corrente della mappa.map.setHeading()accetta qualsiasi valore e lo modificherà per rientrare nell'intervallo [0, 360].