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 funkcji 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 elementó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 funkcji w odpowiedniej warstwie funkcji i stosowana w momencie ustawienia właściwości stylu. Aby go zaktualizować, musisz ponownie ustawić właściwość style.

Aby zastosować jednolity styl do wszystkich obiektów w warstwie obiektów, ustaw właściwość style na google.maps.FeatureStyleOptions. W tym 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, losowanie nie powinno odbywać się w funkcji stylu obiektu, ponieważ spowoduje to niepożądane wyniki.

Ponieważ ta funkcja jest uruchamiana dla każdej cechy w warstwie, optymalizacja jest ważna. Aby nie wpływać na czas renderowania:

• Włącz tylko te warstwy, których potrzebujesz.
• Ustaw wartość style na null, gdy warstwa nie jest już używana.

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

1. Jeśli jeszcze tego nie zrobiono, wykonaj czynności opisane w sekcji Pierwsze kroki, aby utworzyć nowy identyfikator mapy i styl mapy. Upewnij się, że warstwa obiektów Lokalizacja jest włączona.

2. Uzyskaj odniesienie do warstwy obiektów lokalizacji po zainicjowaniu mapy.

   TypeScript

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

   JavaScript

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

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

4. Ustaw właściwość style warstwy obiektów na FeatureStyleFunction. W tym przykładzie 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: { feature: { placeId: string; }; }) => {
     if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
       return featureStyleOptions;
     }
   };
   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) => {
       if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
           return featureStyleOptions;
       }
   };
   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 „Nowy Jork” nie przyniesie żadnego efektu.

Usuwanie stylu z warstwy

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

featureLayer.style = null;

Wyszukiwanie identyfikatorów miejsc do kierowania reklam na funkcje

Aby uzyskać identyfikatory miejsc dla regionów:

• Korzystaj z interfejsów Places API i geokodowania, 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 identyfikatora miejsca, nazwy wyświetlanej i kategorii typu funkcji.

Zasięg różni się w zależności od regionu. Więcej informacji znajdziesz w sekcji Zasięg granic Google.

Nazwy geograficzne są dostępne w wielu źródłach, np. w USGS Board on Geographic Names i U.S. Gazetteer Files.

Pełny przykładowy kod

let featureLayer;

async function initMap() {
  // Request needed libraries.
  await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  // Get the gmp-map element.
  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  // Get the inner map.
  const innerMap = mapElement.innerMap;

  // Get the feature layer.
  featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.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: { feature: { placeId: string; }; }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
      return featureStyleOptions;
    }
  };

}

initMap();
index.ts

let featureLayer;
async function initMap() {
    // 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(google.maps.FeatureType.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) => {
        if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
            return featureStyleOptions;
        }
    };
}
initMap();
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>
    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </head>
  <body>
    <gmp-map center="20.773,-156.01" zoom="12" map-id="8b37d7206ccf0121d4414bb0">
  </body>
</html>
index.html