Styl wielokąta granicznego

Wybierz platformę: iOS JavaScript

Przegląd

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

Na poniższej przykładowej mapie zaznaczono wielokąt granicy pojedynczego regionu.

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

Aby nadać jednolity styl wszystkim cechom w warstwie cech, ustaw właściwość style na google.maps.FeatureStyleOptions. W tym przypadku nie musisz używać funkcji stylu cech, ponieważ logika nie jest wymagana.

Gdy funkcja stylu jest stosowana do cech, powinna zawsze zwracać spójne wyniki. Jeśli np. chcesz losowo zmienić kolor zestawu cech, w funkcji stylu cech nie powinna zajmować losowa część, ponieważ mogłoby to przynieść niezamierzone efekty.

Ponieważ funkcja ta uruchamia się nad każdą cechą w warstwie, optymalizacja jest ważna. Aby uniknąć wpływu na czas renderowania:

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

Aby stylizować wielokąt w warstwie obiektów lokalnych, wykonaj następujące czynności:

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

2. Uzyskiwanie odniesienia do warstwy obiektów lokalnych podczas inicjowania mapy.

   featureLayer = map.getFeatureLayer("LOCALITY");

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

4. Ustaw właściwość style w warstwie cech na FeatureStyleFunction. Poniższy przykład pokazuje, jak zdefiniować funkcję stosującą styl tylko do elementu google.maps.Feature o pasującym identyfikatorze 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 na temat korzystania 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 podany identyfikator miejsca nie zostanie znaleziony lub nie pasuje do wybranego typu obiektu, styl nie zostanie zastosowany. Na przykład próba dodania stylu warstwy POSTAL_CODE pasującego do identyfikatora miejsca „Nowy Jork” nie spowoduje zastosowania stylu.

Usuwanie stylu z warstwy

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

featureLayer.style = null;

Wyszukaj identyfikatory miejsc, aby kierować reklamy na obiekty

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 znajdujących się w określonych granicach.
• Pobieranie danych ze zdarzeń kliknięcia Zwraca funkcję odpowiadającą klikniętemu regionowi, co daje dostęp do identyfikatora miejsca, wyświetlanej nazwy i kategorii typu cechy.

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

Nazwy geograficzne są dostępne w wielu źródłach, takich jak U.S. Board on Geographic Names i pliki dziennika USA.

Uzupełnij 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 na temat korzystania 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 },
    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 skompilowany 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 fragment

JSFiddle.net Google Cloud Shell