Segui questi passaggi per configurare lo stile basato sui dati per i set di dati.
Ottieni una chiave API e abilita le API
Prima di utilizzare gli stili basati sui dati per i set di dati, è necessario: progetto con un account di fatturazione e sia l'API Maps JavaScript e l'API Maps Datasets abilitata. Per saperne di più, consulta Configurare il progetto Google Cloud.
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.
Fornisci un ID mappa utilizzando la proprietà mapId quando crei un'istanza della mappa .
L'ID mappa deve corrispondere allo stile di mappa associato al set di dati
da visualizzare.
const position = new google.maps.LatLng(40.75, -74.05);
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: position,
mapId: 'YOUR_MAP_ID',
});
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.
Aggiorna il codice di inizializzazione della mappa
Per utilizzare gli stili basati sui dati per i set di dati, carica prima l'API Maps JavaScript,
aggiungendo il bootstrap loader in linea al codice dell'applicazione, come mostrato qui
(utilizza v=beta nel tag script dell'API):
<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>
(Facoltativo) Controlla le funzionalità della mappa
Gli stili basati sui dati per i set di dati richiedono un ID mappa. Se manca l'ID mappa:
o viene trasmesso un ID mappa non valido, gli elementi dei dati non possono essere caricati. Come
passaggio per la risoluzione dei problemi, puoi aggiungere un listener mapcapabilities_changed a
iscriviti alle modifiche delle funzionalità della mappa. Ciò indicherà se:
sono state soddisfatte:
- È in uso un ID mappa valido.
- L'ID mappa è associato a una mappa vettoriale.
L'utilizzo delle funzionalità mappa è facoltativo e consigliato solo per test e per la risoluzione dei problemi o per il fallback del runtime.
// Optional: subscribe to map capability 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.
}
});