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. L'esempio seguente aggiunge alla mappa alcuni pulsanti 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=beta"
defer
></script>
</body>
</html>
Prova Sample
Utilizzo dei gesti con il mouse e con la tastiera
Puoi regolare l'inclinazione e la rotazione utilizzando il mouse e la 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, verso destra e verso 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'intestazione.
Regolazione programmatica di inclinazione e intestazione
Utilizza i metodi setTilt() e setHeading() per regolare in modo programmatico l'inclinazione e l'intestazione 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 è misurato dallo zenit, in modo che map.setTilt(0) guardi verso il basso, mentre map.setTilt(45) mostrerà 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. UtilizzagetHeading()per ottenere il valore corrente dell'intestazione.
Per modificare il centro della mappa mantenendo inclinazione e intestazione, utilizza
map.setCenter() o map.panBy().
Tieni presente che la gamma di angolazioni utilizzabili varia a seconda del 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'applicazione dell'inclinazione o 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. Se 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 della 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 adattarlo all'intervallo [0, 360].