Nadawanie stylu wielokątowi granicy

Przegląd

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

Poniższa przykładowa mapa pokazuje wyróżnienie wielokąta granicznego dla jednego regionu.

Zastosuj styl do obiektów granicznych, ustawiając właściwość style na google.maps.FeatureStyleFunction, która może zawierać logikę stylizacji. Funkcja stylu jest uruchamiana dla każdej cechy w odpowiedniej warstwie mapy i jest stosowana w momencie ustawienia właściwości stylu. Aby go zaktualizować, musisz ponownie ustawić właściwość stylu.

Aby zastosować ten sam styl do wszystkich funkcji w warstwie mapy, ustaw właściwość style na google.maps.FeatureStyleOptions. W takim przypadku nie musisz używać funkcji stylu elementu, ponieważ nie jest wymagana logika.

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

Ta funkcja jest uruchamiana dla każdego obiektu w warstwie, dlatego optymalizacja jest ważna. Aby uniknąć wpływu na czas renderowania:

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

Aby nadać styl wielokątowi w warstwie mapy obiektów miejscowości, wykonaj te czynności:

1. Jeśli jeszcze nie masz identyfikatora i stylu mapy, wykonaj czynności opisane w sekcji Pierwsze kroki, aby je utworzyć. Pamiętaj, aby włączyć warstwę mapy Miejscowość.

2. Uzyskaj odwołanie do warstwy mapy z miejscowościami podczas inicjowania mapy.

   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 warstwy mapy na FeatureStyleFunction. W przykładzie poniżej pokazujemy, jak zdefiniować funkcję, która stosuje styl tylko do elementu google.maps.Feature o pasującym identyfikatorze 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 pasuje do wybranego typu elementu, styl nie zostanie zastosowany. Na przykład próba stylizowania warstwy POSTAL_CODE pasującej do identyfikatora miejsca „Nowy Jork” nie spowoduje zastosowania żadnego stylu.

Usuwanie stylu z warstwy

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

featureLayer.style = null;

Wyszukiwanie identyfikatorów miejsc na potrzeby kierowania funkcji

Aby uzyskać identyfikatory miejsc dla regionów:

• Używaj interfejsów Places API i Geocoding, aby wyszukiwać regiony według nazwy i uzyskiwać identyfikatory miejsc w regionach w określonych granicach.
• Pobieranie danych ze zdarzeń kliknięcia Zwraca obiekt Feature odpowiadający klikniętemu regionowi, który zapewnia dostęp do jego identyfikatora miejsca, wyświetlanej nazwy i kategorii typu obiektu.

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

Nazwy geograficzne są dostępne w wielu źródłach, 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