Panoramica
Per definire gli attributi di stile del riempimento e del tratto di un poligono di confine, utilizza FeatureStyleOptions
e imposta la proprietà style
in un livello degli elementi su google.maps.FeatureStyleFunction
, contenente la logica di stile.
La seguente mappa di esempio mostra come evidenziare il poligono del confine di una singola regione.
Applica lo stile agli elementi dei confini impostando la proprietà style
su un google.maps.FeatureStyleFunction
, che può contenere logica di stile. La funzione di stile viene eseguita su ogni elemento nel livello di elementi interessato e viene applicata nel momento in cui imposti la proprietà di stile. Per aggiornarla, devi impostare
di nuovo la proprietà di stile.
Per applicare uno stile uniforme a tutti gli elementi di un livello di elementi, imposta la proprietà style
su
google.maps.FeatureStyleOptions
. In questo caso, non è necessario utilizzare una funzione di stile delle caratteristiche, poiché la logica non è obbligatoria.
La funzione di stile deve sempre restituire risultati coerenti quando viene applicata alle caratteristiche. Ad esempio, se vuoi colorare in modo casuale un insieme di caratteristiche, la parte casuale non deve avvenire nella funzione di stile delle caratteristiche, in quanto ciò causerebbe risultati indesiderati.
Poiché questa funzione viene eseguita su ogni caratteristica di un livello, l'ottimizzazione è importante. Per evitare di influire sui tempi di rendering:
- Abilita solo i livelli che ti servono.
- Imposta
style
sunull
quando un livello non è più in uso.
Per applicare uno stile a un poligono nel livello degli elementi di località, procedi nel seguente modo:
- Se non lo hai già fatto, segui la procedura descritta in Inizia per creare un nuovo ID mappa e uno stile di mappa. Assicurati di abilitare il livello di funzionalità Località.
Ottieni un riferimento al livello degli elementi di località quando viene inizializzata la mappa.
featureLayer = map.getFeatureLayer("LOCALITY");
Crea una definizione dello stile di tipo
google.maps.FeatureStyleFunction
.Imposta la proprietà
style
nel livello dell'elemento suFeatureStyleFunction
. L'esempio seguente mostra la definizione di una funzione per applicare uno stile solo agoogle.maps.Feature
con un ID luogo corrispondente:TypeScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } };
JavaScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } };
Se l'ID luogo specificato non viene trovato o non corrisponde al tipo di elemento selezionato, lo stile non viene applicato. Ad esempio,
il tentativo di applicare uno stile a un livello POSTAL_CODE
corrispondente all'ID luogo per "Città
di New York" non comporterà l'applicazione di uno stile.
Rimuovere gli stili da un livello
Per rimuovere lo stile da un livello, imposta style
su null
:
featureLayer.style = null;
Cerca gli ID luogo per scegliere come target gli elementi
Per ottenere gli ID luogo per le regioni:
- Utilizza le API Places e la geocodifica per cercare le regioni per nome e ottenere gli ID luogo per le regioni all'interno dei limiti specificati.
- Ottenere i dati dagli eventi di clic. Questa azione restituisce la funzionalità corrispondente a una regione selezionata, che fornisce l'accesso al relativo ID luogo, nome visualizzato e categoria del tipo di elemento.
La copertura varia in base alla regione. Per informazioni dettagliate, consulta la pagina relativa alla copertura dei confini di Google.
I nomi geografici sono disponibili da diverse fonti, ad esempio dall'USGS Board on Geographic Contacts e dai file Gazetteer degli Stati Uniti.
Esempio di codice completo
TypeScript
let map: google.maps.Map; //@ts-ignore let featureLayer; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: 20.773, lng: -156.01 }, // Hana, HI zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer('LOCALITY'); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } }; } initMap();
JavaScript
let map; //@ts-ignore let featureLayer; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); map = new Map(document.getElementById("map"), { center: { lat: 20.773, lng: -156.01 }, zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer("LOCALITY"); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } }; } 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; }
HTML
<html> <head> <title>Boundaries Simple</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> <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>