Personalizzare le mappe 3D

Puoi personalizzare l'aspetto della mappa base 3D utilizzando la personalizzazione delle mappe basata su cloud.

Con la personalizzazione delle mappe basata su cloud, hai il controllo sull'aspetto della mappa che presenti agli utenti. Controllando funzionalità come la densità dei punti d'interesse (PDI), la rimozione di determinate categorie di PDI e la modifica del riempimento o del tratto degli elementi, puoi creare un'esperienza di mappa su misura per i tuoi utenti.

La personalizzazione delle mappe basata su cloud offre un'esperienza di modifica senza codice nella console Google Cloud. Ogni stile personalizzato che crei è associato a un ID mappa. Le modifiche apportate allo stile nella console di Maps verranno visualizzate automaticamente nella tua applicazione.

L'esempio seguente mostra una mappa che utilizza uno stile personalizzato per cambiare il colore delle icone e del testo degli elementi ricreativi in arancione:

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

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

Panoramica

La procedura per personalizzare le mappe 3D utilizzando la personalizzazione delle mappe basata su cloud è la stessa delle mappe 2D:

1 Crea un ID mappa Crea un ID mappa. Gli ID mappa vengono passati alla tua applicazione per gestire lo stile. Nei passaggi successivi, assocerai uno stile personalizzato a questo ID mappa.
2 Crea uno stile di mappa basato su cloud In questo passaggio, seleziona "3D Roadmap" (supporta la modalità Luce e modalità Buio) o "3D Hybrid" (supporta la modalità Luce).
3 Collega lo stile all'ID mappa che hai creato nel primo passaggio.
4 Aggiungi l'ID mappa alla tua applicazione Specifica l'ID mappa nel codice utilizzando il parametro map-id.
5 Pubblica l'ID mappa Tieni presente che le modifiche allo stile personalizzato vengono incorporate automaticamente nell'applicazione dopo la pubblicazione.

Per un'analisi approfondita della creazione di stili di mappa, consulta Crea e utilizza stili di mappa.

Aggiorna l'ID mappa in modo dinamico

Puoi aggiornare la proprietà mapId in modo dinamico dopo aver creato un'istanza della mappa. In questo modo puoi applicare uno stile di mappa basato su cloud diverso senza dover ricreare l'intera istanza Map3DElement.

Per aggiornare l'ID mappa, imposta la proprietà mapId nell'istanza Map3DElement:

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

Poiché la proprietà mapId si riflette nell'attributo HTML, puoi anche aggiornarla dinamicamente modificando l'attributo:

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

Limitazioni

Esistono alcune limitazioni da tenere presenti quando utilizzi la personalizzazione delle mappe basata su cloud con le mappe 3D in Maps JavaScript:

  • La modalità Buio è supportata solo in modalità ROADMAP (le modalità HYBRID e SATELLITE non supportano la modalità Buio).
  • Le funzionalità abilitate per l'ID mappa, come lo stile basato sui dati, non sono supportate.