Styl wielokąta granicznego

Wybierz platformę: Android iOS JavaScript

Omówienie

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

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

Zastosuj styl do elementów granicy, ustawiając właściwości style na google.maps.FeatureStyleFunction, która może zawierać logikę stylizacji. Funkcja stylu jest uruchamiana po każdej funkcji w warstwie cech, której dotyczy problem, i stosowana podczas ustawiania właściwości stylu. Aby zaktualizować ten element, 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 stylu powinna zawsze zwracać spójne wyniki po zastosowaniu do funkcji. Jeśli na przykład chcesz losowo pokolorować zbiór obiektów, w funkcji stylu cech nie powinien on mieć miejsca, ponieważ spowodowałoby to niezamierzone zachowanie.

Ta funkcja działa na każdej funkcji w warstwie, dlatego optymalizacja jest ważna. Aby uniknąć problemów z czasem renderowania:

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

Aby nadać styl poligonom w warstwie obiektów lokalizacji:

  1. Jeśli jeszcze tego nie zrobiono, wykonaj czynności opisane w sekcji Pierwsze kroki, aby utworzyć nowy identyfikator mapy i nowy styl mapy. Pamiętaj, by włączyć warstwę cech Miejscowość.

  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 w warstwie cech na FeatureStyleFunction. Ten przykład pokazuje definiowanie funkcji, która ma zastosować 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

    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 określenia stylu warstwy POSTAL_CODE pasującej do identyfikatora miejsca „Nowy Jork” skutkowała niezastosowaniem stylu.

Usuwanie stylizacji z warstwy

Aby usunąć styl z warstwy, ustaw 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. Więcej informacji znajdziesz w artykule Zasięg granic Google.

Nazwy geograficzne są dostępne z wielu źródeł, takich jak USGS Board on Geo Names i U.S. Gazetteer Files.

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

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

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

Zobacz próbkę