Definisci un poligono di confine

Seleziona la piattaforma: Android iOS JavaScript

Panoramica

Per applicare uno stile a riempimento e tratto per un poligono di confine, utilizza FeatureStyleOptions per definire gli attributi di stile e imposta la proprietà style su un livello di funzionalità 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 di confine impostando la proprietà style su un valore google.maps.FeatureStyleFunction, che può contenere la logica di stile. Lo stile viene eseguita su ogni elemento nel livello delle caratteristiche interessato e viene applicata nel momento in cui imposti la proprietà di stile. Per aggiornarlo, devi impostare di nuovo la proprietà stile.

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

La funzione di stile dovrebbe sempre restituire risultati coerenti quando viene applicata sulle funzionalità. Ad esempio, se vuoi colorare in modo casuale un insieme di elementi, la parte casuale non deve essere presente nella funzione di stile dell'elemento, poiché causerebbe risultati indesiderati.

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

  • Abilita 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 località, procedi nel seguente modo:

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

  2. Ottieni un riferimento al livello degli elementi 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 nel livello degli elementi su FeatureStyleFunction. L'esempio seguente mostra la definizione di una funzione per applicare uno stile solo alla 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

    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 elemento selezionato, lo stile non viene applicato. Ad esempio, tentare di applicare uno stile a un livello POSTAL_CODE corrispondente all'ID luogo di "New York" non comporterà 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 scegliere come target le funzionalità

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.
  • Ottieni i dati dagli eventi di clic. Restituisce la caratteristica 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 caratteristica.

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

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

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 Sample