Inizia

Seleziona la piattaforma: iOS JavaScript

Per utilizzare gli stili basati sui dati per i confini, devi creare un ID mappa che utilizzi il parametro Mappa vettoriale JavaScript. Successivamente, devi creare un nuovo stile di mappa, selezionare lo stile desiderato livelli degli elementi di confine e associa lo stile all'ID mappa.

Crea un ID mappa

Per creare un nuovo ID mappa, segui la procedura descritta in Personalizzazione del cloud. Imposta il tipo di mappa su JavaScript e seleziona l'opzione Vettore. Seleziona Inclinazione e/o Rotazione per attivare l'inclinazione e la rotazione sulla mappa. Se l'uso dell'inclinazione o dell'orientamento influirà negativamente sull'app, lascia Inclinazione e L'opzione Rotazione non è selezionata, quindi gli utenti non potranno regolare l'inclinazione e la rotazione.

Crea ID mappa vettoriale

Crea un nuovo stile di mappa

Per creare un nuovo stile di mappa, segui le istruzioni riportate in Gestire gli stili di mappa. per creare lo stile e associarlo all'ID mappa appena creato.

Seleziona livelli degli elementi

Nella console API di Google puoi selezionare i livelli degli elementi da visualizzare. Questo determina quali tipi di confini verranno visualizzati sulla mappa (ad esempio, località, stati e così via).

Per gestire i livelli delle caratteristiche

  1. Nella console API di Google, vai alla pagina Stili di mappa.
  2. Seleziona un progetto, se richiesto.
  3. Seleziona uno stile di mappa.
  4. Fai clic sul menu a discesa Livelli degli elementi per aggiungere o rimuovere livelli.
  5. Fai clic su Salva per salvare le modifiche e renderle disponibili per le tue mappe.

Uno screenshot che mostra il menu a discesa.

Aggiorna il codice di inizializzazione della mappa

È necessario l'ID mappa che hai appena creato. È disponibile su Maps Gestione.

  1. Carica l'API Maps JavaScript aggiungendo il bootstrap in linea al codice dell'applicazione, come mostrato nello snippet seguente:
<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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

  1. Fornisci un ID mappa quando crei un'istanza della mappa utilizzando la proprietà mapId. Deve essere l'ID mappa che hai configurato utilizzando uno stile di mappa con funzionalità strati abilitati.

    map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});

Scopri di più sul caricamento dell'API Maps JavaScript.

Aggiungere livelli di elementi a una mappa

Per ottenere un riferimento a un livello di elementi sulla mappa, chiama map.getFeatureLayer() quando la mappa viene inizializzata:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

Verifica le funzionalità della mappa

Gli stili basati sui dati per i confini richiedono funzionalità abilitate nel Console API di Google e associata a un ID mappa. Poiché gli ID mappa sono temporanei e soggetti a modifiche, puoi chiamare map.getMapCapabilities() per verificare se una determinata funzionalità (ad esempio lo stile basato sui dati) è disponibili prima di chiamarlo. Questo controllo è facoltativo.

L'esempio seguente mostra l'aggiunta di un listener per la sottoscrizione alla funzionalità della mappa. modifiche:

// subscribe to changes
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});

Passaggi successivi