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 feature layer su un google.maps.FeatureStyleFunction, che contiene la logica di stile.

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

Applica lo stile alle funzionalità di confine impostando la proprietà style su un google.maps.FeatureStyleFunction, che può contenere la logica di stile. La funzione di stile viene eseguita su ogni funzionalità nel feature layer interessato e viene applicata nel momento in cui imposti la proprietà di stile. Per aggiornarlo, devi impostare di nuovo la proprietà style.

Per applicare uno stile uniforme a tutte le funzionalità di un feature layer, imposta la proprietà style su un google.maps.FeatureStyleOptions. In questo caso, non è necessario utilizzare una funzione di stile della funzionalità, poiché non è richiesta alcuna logica.

La funzione di stile deve sempre restituire risultati coerenti quando viene applicata alle funzionalità. Ad esempio, se vuoi colorare in modo casuale un insieme di funzionalità, la parte casuale non deve avvenire nella funzione di stile della funzionalità, in quanto 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 necessari.
• Imposta style su null quando un livello non è più in uso.

Per applicare uno stile a un poligono nel feature layer della località, segui questi passaggi:

1. Se non l'hai ancora fatto, segui i passaggi descritti in Guida introduttiva per creare un nuovo ID mappa e un nuovo stile mappa. Assicurati di attivare il feature layer Località.

2. Ottieni un riferimento al feature layer della località quando la mappa viene inizializzata.

   featureLayer = map.getFeatureLayer("LOCALITY");

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

4. Imposta la proprietà style sul feature layer su FeatureStyleFunction. L'esempio seguente mostra la definizione di una funzione per applicare uno stile solo all'google.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;
     }
   };
   index.ts

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

   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;
     }
   };
   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, il tentativo di applicare uno stile a un livello POSTAL_CODE corrispondente all'ID luogo per "New York City" non comporterebbe l'applicazione di 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 il targeting delle funzionalità

Per ottenere gli ID luogo per le regioni:

• Utilizza le API Places e il geocoding per cercare regioni per nome e ottenere gli ID luogo per le regioni all'interno di limiti specificati.
• Ottieni 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 Copertura dei confini di Google.

I nomi geografici sono disponibili da molte fonti, come l'USGS Board on Geographic Names e i file U.S. 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();
index.ts

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

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();
index.js

Nota:il codice JavaScript viene compilato dallo snippet TypeScript.

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;
}
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>
  </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>
index.html

Prova campione

JSFiddle.net Google Cloud Shell