Panoramica
Per applicare uno stile al riempimento e al tratto di un poligono di confine, utilizza FeatureStyleOptions
.
per definire gli attributi di stile e impostare la proprietà style
su un livello delle caratteristiche su un
google.maps.FeatureStyleFunction
, che contiene logica di stile.
La mappa di esempio seguente mostra l'evidenziazione del poligono di confine per una in una singola regione.
Applica lo stile agli elementi per confini impostando la proprietà style
su un
google.maps.FeatureStyleFunction
, che può contenere logica di stile. Lo stile
viene eseguita su ogni elemento nel livello degli elementi interessato e viene applicata
nel momento in cui imposti la proprietà di stile. Per aggiornarlo, devi impostare lo stile
proprietà.
Per definire in modo uniforme tutti gli elementi di un livello di elementi, imposta la proprietà style
su
un google.maps.FeatureStyleOptions
. In questo caso, non è necessario utilizzare una
funzione di stile delle caratteristiche, poiché la logica non è richiesta.
La funzione di stile dovrebbe sempre restituire risultati coerenti quando viene applicata sulle funzionalità. Ad esempio, per colorare in modo casuale un insieme di caratteristiche, la parte casuale non dovrebbe avvenire nella funzione di stile delle caratteristiche, perché potrebbe causare risultati indesiderati.
Poiché questa funzione viene eseguita su ogni caratteristica di un livello, l'ottimizzazione viene importanti. Per non influire sui tempi di rendering:
- Abilita solo i livelli di cui hai bisogno.
- Imposta
style
sunull
quando un livello non è più in uso.
Per applicare uno stile a un poligono nel livello degli elementi località, procedi nel seguente modo:
- Se non lo hai già fatto, segui i passaggi descritti in Come iniziare per creare un nuovo ID mappa e un nuovo stile di mappa. Assicurati di attivare la casella Località. delle caratteristiche.
Ottieni un riferimento al livello degli elementi località quando la mappa viene inizializzata.
featureLayer = map.getFeatureLayer("LOCALITY");
Crea una definizione di stile di tipo
google.maps.FeatureStyleFunction
.Imposta la proprietà
style
nel livello degli elementi suFeatureStyleFunction
. L'esempio seguente mostra la definizione di una funzione per applicare uno stile solo allagoogle.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
corrispondono al tipo di elemento selezionato, lo stile non viene applicato. Ad esempio:
tentativo di applicare uno stile a un livello POSTAL_CODE
corrispondente all'ID luogo di "New York"
Città" non verrebbe applicato alcun stile.
Rimuovere lo stile da un livello
Per rimuovere lo stile da un livello, imposta style
su null
:
featureLayer.style = null;
Cercare gli ID dei luoghi per scegliere come target gli elementi
Per ottenere gli ID luogo per le regioni:
- Utilizza le API Places e Geocoding per cercare regioni per nome, e ottenere gli ID luogo per le regioni entro limiti specificati.
- Recuperare i dati dagli eventi di clic. Restituisce l'elemento corrispondente a una regione selezionata, che fornisce accesso all'ID luogo, al nome visualizzato e alla categoria del tipo di elemento.
La copertura varia in base alla regione. Per informazioni dettagliate, consulta Copertura dei confini di Google.
I nomi geografici sono disponibili da molte fonti, ad esempio Commissione per i nomi geografici dell'USGS, e gli Stati Uniti File di Gazetteer.
Codice di esempio 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 }, // 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 = { 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> <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>