Modalità mappa 3D

Nell'API Maps JavaScript sono disponibili le seguenti modalità di mappa 3D:

  • ROADMAP mostra la visualizzazione predefinita della mappa stradale con le etichette della basemap.
  • SATELLITE mostra una mappa fotorealistica basata su immagini aeree.
  • HYBRID mostra la visualizzazione della mappa satellitare con le etichette della basemap.

Ecco un esempio della mappa 3D in modalità ROADMAP:

TypeScript

async function init() {
  const { Map3DElement } = await google.maps.importLibrary('maps3d');

  const map = new Map3DElement({
    center: {
      lat: 37.79334535092104,
      lng: -122.400742086205,
      altitude: 0,
    },
    range: 2400,
    tilt: 65,
    heading: 0,
    mode: 'ROADMAP',
    internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
  });

  document.body.append(map);

  // Create the controls container
  const controls = document.createElement('div');
  controls.id = 'controls';
  controls.classList.add('map-mode-control');

  // Create the select element
  const selector = document.createElement('select');
  selector.id = 'map-mode';

  const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
  modes.forEach((modeName) => {
    const option = document.createElement('option');
    option.value = modeName;
    option.textContent = modeName;
    if (modeName === 'ROADMAP') {
      option.selected = true;
    }
    selector.appendChild(option);
  });

  selector.addEventListener('change', (event) => {
    map.mode = (event.target as HTMLSelectElement).value;
  });

  controls.appendChild(selector);
  document.body.appendChild(controls);
}

init();
index.ts

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');
    const map = new Map3DElement({
        center: {
            lat: 37.79334535092104,
            lng: -122.400742086205,
            altitude: 0,
        },
        range: 2400,
        tilt: 65,
        heading: 0,
        mode: 'ROADMAP',
        internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
    });
    document.body.append(map);
    // Create the controls container
    const controls = document.createElement('div');
    controls.id = 'controls';
    controls.classList.add('map-mode-control');
    // Create the select element
    const selector = document.createElement('select');
    selector.id = 'map-mode';
    const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
    modes.forEach((modeName) => {
        const option = document.createElement('option');
        option.value = modeName;
        option.textContent = modeName;
        if (modeName === 'ROADMAP') {
            option.selected = true;
        }
        selector.appendChild(option);
    });
    selector.addEventListener('change', (event) => {
        map.mode = event.target.value;
    });
    controls.appendChild(selector);
    document.body.appendChild(controls);
}
init();
index.js

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

gmp-map-3d {
  height: 100%;
  width: 100%;
}

.map-mode-control {
  position: fixed;
  bottom: 24px;
  right: 75px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  z-index: 1;
}

.map-mode-control select {
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  background-color: white;
  color: #3c4043;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.map-mode-control select:hover {
  border-color: #1a73e8;
}

.map-mode-control select:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

style.css

HTML

<html>

<head>
  <title>3d-map-roadmap</title>

  <link rel="stylesheet" type="text/css" href="./style.css" />
  <script type="module" src="./index.js"></script>
  <!-- prettier-ignore -->
  <script>(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
      ({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha" });</script>
</head>

<body>
</body>

</html>
index.html

Prova campione

Vantaggi principali

  • Globo: ora puoi offrire un'esperienza di mappa completa per vari casi d'uso sfruttando immagini di mappe astratte e fotorealistiche.
  • Personalizzazione: ora puoi passare da una modalità all'altra con un pulsante o una funzione personalizzata senza ricaricare il componente complessivo.