Applicare uno stile a un poligono di confine

Seleziona la piattaforma: Android iOS JavaScript

Panoramica

Per applicare uno stile al riempimento e al tratto di un poligono di confine, utilizza FeatureStyleOptions per definire gli attributi di stile e imposta la proprietà style su un livello degli elementi su un google.maps.FeatureStyleFunction, che contiene la logica di stile.

La mappa di esempio seguente mostra l'evidenziazione del poligono di confine per una singola regione.

Applica lo stile agli elementi dei confini impostando la proprietà style su un google.maps.FeatureStyleFunction, che può contenere la logica di stile. La funzione di stile viene eseguita su ogni elemento nel livello degli elementi interessato e viene applicata quando imposti la proprietà di stile. Per aggiornarlo, devi impostare nuovamente la proprietà style.

Per applicare uno stile uniforme a tutti gli elementi di un livello degli elementi, imposta la proprietà style su google.maps.FeatureStyleOptions. In questo caso, non è necessario utilizzare una funzione di stile degli elementi, poiché non è richiesta alcuna logica.

La funzione di stile deve restituire sempre risultati coerenti quando viene applicata alle caratteristiche. Ad esempio, se vuoi colorare in modo casuale un insieme di elementi, la parte casuale non deve essere eseguita nella funzione di stile degli elementi, poiché ciò causerebbe risultati indesiderati.

Poiché questa funzione viene eseguita su ogni elemento di un livello, l'ottimizzazione è importante. Per evitare di influire sui tempi di rendering:

• Attiva solo i livelli di cui hai bisogno.
• Imposta style su null quando un livello non è più in uso.

Per applicare uno stile a un poligono nel livello degli elementi delle località, segui questi passaggi:

1. Se non l'hai ancora fatto, segui i passaggi descritti in Inizia per creare un nuovo ID mappa e un nuovo stile di mappa. Assicurati di attivare il livello degli elementi Località.

2. Ottieni un riferimento al livello degli elementi della località quando la mappa viene inizializzata.

   TypeScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.ts

   Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

   JavaScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.js

3. Crea una definizione di stile di tipo google.maps.FeatureStyleFunction.

4. Imposta la proprietà style sul livello degli elementi su FeatureStyleFunction. L'esempio seguente mostra la definizione di una funzione per applicare uno stile solo a google.maps.Feature con un ID luogo corrispondente:

   TypeScript

   // Define a style with purple fill and border.
   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.
   featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
       const feature = options.feature as google.maps.PlaceFeature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.ts

   Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

   JavaScript

   // Define a style with purple fill and border.
   const featureStyleOptions = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 3.0,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };
   
   // Apply the style to a single boundary.
   featureLayer.style = (options) => {
       const feature = options.feature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.js

Se l'ID luogo specificato non viene trovato o non corrisponde al tipo di elemento selezionato, lo stile non viene applicato. Ad esempio, se provi a applicare uno stile a un livello POSTAL_CODE corrispondente all'ID luogo di "New York City", non verrà applicato alcuno stile.

Rimuovi lo stile da un livello

Per rimuovere lo stile da un livello, imposta style su null:

featureLayer.style = null;

Cerca gli ID luogo per scegliere le funzionalità target

Per ottenere gli ID luogo per le regioni:

• Utilizza le API Places e Geocoding per cercare le regioni per nome e ottenere gli ID luogo per le regioni entro i limiti specificati.
• Ottenere dati dagli eventi di clic. In questo modo viene restituito l'elemento corrispondente a una regione selezionata, che fornisce l'accesso al relativo ID luogo, al nome visualizzato e alla categoria del tipo di elemento.

La copertura varia in base alla regione. Per maggiori dettagli, consulta Copertura dei confini di Google.

I nomi geografici sono disponibili da molte fonti, come l'USGS Board on Geographic Names e gli U.S. Gazetteer Files.

Codice di esempio completo

TypeScript

let featureLayer: google.maps.FeatureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    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.
    featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
        const feature = options.feature as google.maps.PlaceFeature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.ts

Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

let featureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    const featureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options) => {
        const feature = options.feature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Boundaries Simple</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>
index.html

Prova l'esempio

JSFiddle.net