Nadawanie stylu wielokątowi granicy

Wybierz platformę: Android iOS JavaScript

Omówienie

Aby nadać styl wypełnieniu i obrysowi poligonu granicznego, użyj atrybutów stylu FeatureStyleOptions. Właściwość style w warstwie obiektów ustaw na google.maps.FeatureStyleFunction, która zawiera logikę stylizacji.

Na przykładowej mapie poniżej zaznaczono poligon granicy pojedynczego regionu.

Zastosuj styl do elementów granicy, ustawiając właściwość style na wartość google.maps.FeatureStyleFunction, która może zawierać logikę stylizacji. Funkcja stylizowania jest wykonywana na każdej funkcji w odpowiedniej warstwie funkcji i jest stosowana w momencie ustawienia właściwości stylu. Aby zaktualizować tę wartość, musisz ponownie ustawić właściwość style.

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

Funkcja style powinna zawsze zwracać spójne wyniki, gdy jest stosowana w różnych funkcjach. Jeśli na przykład chcesz losowo zabarwić zbiór cech, funkcja losowania nie powinna być uwzględniona w funkcji stylu cech, ponieważ spowodowałoby to niezamierzone wyniki.

Ta funkcja działa na każdej funkcji w warstwie, dlatego 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 nadać styl poligonowi w warstwie obiektów „lokalizacja”, wykonaj te czynności:

  1. Jeśli nie masz jeszcze nowego identyfikatora mapy ani nowego stylu mapy, wykonaj czynności opisane w sekcji Rozpoczęcie. Pamiętaj, aby włączyć warstwę obiektów Locality.
  2. Pobieranie odwołania do warstwy obiektu lokalizacji podczas inicjowania mapy.

    featureLayer = map.getFeatureLayer("LOCALITY");
  3. Utwórz definicję stylu typu google.maps.FeatureStyleFunction.

  4. Ustaw właściwość style warstwy obiektów na wartość FeatureStyleFunction. Poniższy przykład pokazuje zdefiniowanie funkcji, która stosuje styl tylko do 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;
      }
    };

    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;
      }
    };

Jeśli nie uda się znaleźć podanego identyfikatora miejsca lub jeśli nie pasuje on do wybranego typu obiektu, styl nie zostanie zastosowany. Na przykład próba nadania stylu warstwie POSTAL_CODE odpowiadającej identyfikatorowi miejsca „Nowy Jork” nie spowoduje zastosowania stylu.

Usuwanie stylizacji z warstwy

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

featureLayer.style = null;

Wyszukiwanie identyfikatorów miejsc do kierowania na funkcje

Aby uzyskać identyfikatory miejsc dla regionów:

Zasięg różni się w zależności od regionu. Szczegółowe informacje znajdziesz w artykule Zakres działania usług Google.

Nazwy geograficzne są dostępne w wielu źródłach, takich jak USGS Board on Geographic Namespliki US 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();

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();

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;
}

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>

Wypróbuj