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 di un livello degli elementi su google.maps.FeatureStyleFunction, che contiene la logica di applicazione dello stile.

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

Applica lo stile alle funzionalità di confine impostando la proprietà style su google.maps.FeatureStyleFunction, che può contenere la logica di applicazione dello stile. La funzione di stile viene eseguita su ogni elemento del livello degli elementi interessato e viene applicata quando imposti la proprietà style. Per aggiornarla, devi impostare di nuovo 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 devi utilizzare una funzione di stile delle funzionalità, poiché non è necessaria alcuna logica.

La funzione di stile deve sempre restituire risultati coerenti quando viene applicata alle funzionalità. Ad esempio, se volessi colorare in modo casuale un insieme di funzionalità, la parte casuale non dovrebbe essere eseguita nella funzione di stile delle funzionalità, in quanto ciò causerebbe risultati imprevisti.

Poiché questa funzione viene eseguita su ogni funzionalità 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 della località:

  1. Se non l'hai ancora fatto, segui i passaggi descritti nella sezione Guida introduttiva per creare un nuovo ID mappa e uno 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(google.maps.FeatureType.LOCALITY);
    index.ts

    JavaScript

    // Get the feature layer.
featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.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 come definire 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: { feature: { placeId: string } }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
        // Hana, HI
        return featureStyleOptions;
    }
};
    index.ts

    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) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
        // Hana, HI
        return featureStyleOptions;
    }
};
    index.js

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

Rimuovere lo stile da un livello

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

featureLayer.style = null;

Cercare gli ID luogo per le funzionalità target

Per ottenere gli ID luogo per le regioni:

  • Utilizza le API Places e il geocoding per cercare le regioni per nome, e ottenere gli ID luogo per le regioni all'interno dei limiti specificati.
  • Ottieni i dati dagli eventi di clic. Viene restituita la funzionalità corrispondente a una regione su cui è stato fatto clic, che fornisce l'accesso al relativo ID luogo, al nome visualizzato e alla categoria del tipo di funzionalità.

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

I nomi geografici sono disponibili da molte fonti, come il USGS Board on Geographic Names, e i file U.S. Gazetteer.

Esempio di codice completo

TypeScript

let featureLayer;

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

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

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

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.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: { feature: { placeId: string } }) => {
        if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
    };
}

initMap();
index.ts

JavaScript

let featureLayer;
async function initMap() {
    // 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(google.maps.FeatureType.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) => {
        if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
    };
}
initMap();
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>
        <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly", internalUsageAttributionIds: "gmp_git_jsapisamples_v1_data-driven-styling" });</script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>
index.html

Prova campione