Nadawanie stylu wielokątowi granicy

Wybierz platformę: Android iOS JavaScript

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

Aby ujednolicić styl 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, losowa część nie powinna znajdować 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 potrzebne warstwy.
• 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. Pamiętaj, aby włączyć warstwę obiektów Lokalizacja.

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

   featureLayer = map.getFeatureLayer("LOCALITY");

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.
   //@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

   Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

   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

Jeśli określony identyfikator miejsca nie zostanie znaleziony lub nie pasuje do wybranego typu obiektu, 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 to obiekt Feature odpowiadający klikniętemu regionowi, który zapewnia dostęp do identyfikatora miejsca, nazwy wyświetlanej i kategorii typu obiektu.

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

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

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

Uwaga: kod JavaScript jest kompilowany z fragmentu kodu TypeScript.

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

Wypróbuj przykład

JSFiddle.net Google Cloud Shell