Nadawanie stylu wielokątowi granicy

Przegląd

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

Przykładowa mapa poniżej pokazuje wyróżniony wielokąt graniczny 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 style jest uruchamiana dla każdej cechy w odpowiedniej warstwie mapy i 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 obiektów 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 lokalizacji, wykonaj te czynności:

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

2. Uzyskaj odwołanie do warstwy obiektów miejscowości 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 w warstwie mapy na FeatureStyleFunction. W przykładzie poniżej pokazujemy, jak zdefiniować funkcję, która stosuje styl tylko do elementu 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 pasuje do wybranego typu funkcji, styl nie zostanie zastosowany. Na przykład próba zastosowania stylu do warstwy POSTAL_CODE pasującej do identyfikatora miejsca „New York City” nie przyniesie żadnego efektu.

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 to obiekt Feature odpowiadający klikniętemu regionowi, który zapewnia dostęp do identyfikatora miejsca, nazwy wyświetlanej i kategorii typu obiektu.

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

Nazwy geograficzne pochodzą 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