Nadawanie stylu wielokątowi granicy

Przegląd

Aby określić styl wypełnienia i obrysu wielokąta granicznego, użyj FeatureStyleOptions, aby zdefiniować atrybuty stylu, a właściwość style w warstwie mapy ustaw na google.maps.FeatureStyleFunction, która zawiera logikę stylizacji.

Poniższy przykład mapy pokazuje wyróżnienie wielokąta granicznego dla jednego regionu.

Aby zastosować styl do funkcji granicznych, ustaw właściwość style na google.maps.FeatureStyleFunction, która może zawierać logikę stylizacji. Funkcja stylu jest uruchamiana dla każdej funkcji w warstwie funkcji, której dotyczy, i jest stosowana w momencie ustawienia właściwości stylu. Aby ją zaktualizować, musisz ponownie ustawić właściwość stylu.

Aby jednolicie stylizować wszystkie funkcje w warstwie mapy, ustaw właściwość style na google.maps.FeatureStyleOptions. W tym przypadku nie musisz używać funkcji stylu funkcji, ponieważ nie jest wymagana żadna logika.

Funkcja stylu powinna zawsze zwracać spójne wyniki, gdy jest stosowana do funkcji. Jeśli na przykład chcesz losowo pokolorować zestaw funkcji, losowa część nie powinna znajdować się w funkcji stylu funkcji, ponieważ spowoduje to niepożądane wyniki.

Ponieważ ta funkcja jest uruchamiana dla każdej funkcji w warstwie, optymalizacja jest ważna. Aby uniknąć wpływu na czas renderowania:

• Włączaj tylko te warstwy, których potrzebujesz.
• Gdy warstwa nie jest już używana, ustaw style na null.

Aby stylizować wielokąt w warstwie mapy funkcji lokalizacji, wykonaj te czynności:

1. Jeśli jeszcze tego nie zrobisz, wykonaj czynności opisane w sekcji Pierwsze kroki aby utworzyć nowy identyfikator mapy i styl mapy. Pamiętaj, aby włączyć warstwę funkcji Lokalizacja.

2. Po zainicjowaniu mapy uzyskaj odniesienie do warstwy mapy lokalizacji.

   TypeScript

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

   JavaScript

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

3. Utwórz definicję stylu typu google.maps.FeatureStyleFunction.

4. Ustaw właściwość style w warstwie mapy na FeatureStyleFunction. Poniższy przykład pokazuje, jak zdefiniować funkcję, która stosuje styl tylko do google.maps.Feature z pasującym identyfikatorem miejsca:

   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

   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

Jeśli określony identyfikator miejsca nie zostanie znaleziony lub nie będzie pasować do wybranego typu funkcji, styl nie zostanie zastosowany. Na przykład próba stylizowania warstwy POSTAL_CODE pasującej do identyfikatora miejsca „Nowy Jork” spowoduje, że styl nie zostanie zastosowany.

Usuwanie stylizacji z warstwy

Aby usunąć stylizację z warstwy, ustaw style na null:

featureLayer.style = null;

Wyszukiwanie identyfikatorów miejsc, aby kierować reklamy na funkcje

Aby uzyskać identyfikatory miejsc dla regionów:

• Użyj interfejsów Places API i Geocoding, aby wyszukiwać regiony według nazwy, i uzyskiwać identyfikatory miejsc dla regionów w określonych granicach.
• Pobieraj dane ze zdarzeń kliknięcia. Spowoduje to zwrócenie funkcji odpowiadającej klikniętemu regionowi, która zapewnia dostęp do jego identyfikatora miejsca, nazwy wyświetlanej i kategorii typu funkcji.

Dostępność danych zależy od regionu. Więcej informacji znajdziesz w artykule Zasięg granic Google.

Nazwy geograficzne są dostępne z wielu źródeł, takich jak USGS Board on Geographic Names, i U.S. Gazetteer Files.

Kompletny przykładowy kod

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

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

/* 
 * 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>
    <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