Styl wielokąta granicznego

Wybierz platformę: iOS JavaScript

Omówienie

Aby określić styl wypełnienia i kreski wielokąta granicy, użyj elementu FeatureStyleOptions. aby zdefiniować atrybuty stylu i ustawić właściwość style w warstwie cech google.maps.FeatureStyleFunction, która zawiera funkcje logiczne.

Na poniższej przykładowej mapie przedstawiono zaznaczanie wielokąta granicy dla miejsca w jednym regionie.

Zastosuj styl do obiektów granicy, ustawiając właściwość style na google.maps.FeatureStyleFunction, która może zawierać funkcje logiczne stylu. Styl jest uruchamiana nad każdą cechą w warstwie cech, której dotyczy problem, w momencie ustawienia właściwości stylu. Aby ją zaktualizować, musisz ustawić styl usłudze.

Aby zastosować jednolity styl do wszystkich obiektów w warstwie cech, ustaw właściwość style na google.maps.FeatureStyleOptions. W takim przypadku nie musisz używać atrybutu stylu funkcji, bo logika nie jest wymagana.

Zastosowanie funkcji stylu powinna zawsze zwracać spójne wyniki nad funkcjami. Jeśli na przykład chcesz losowo pokolorować zestaw cech, część losowa nie powinna być zastępowana w funkcji stylu obiektu, ponieważ spowodowałoby niezamierzone skutki.

Ponieważ funkcja ta działa po wszystkich elementach w warstwie, optymalizacja są ważne. 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 zmienić styl wielokąta w warstwie obiektów o rejonie, wykonaj następujące czynności:

  1. W razie potrzeby wykonaj czynności opisane w artykule Pierwsze kroki. aby utworzyć nowy identyfikator i styl mapy. Pamiętaj, aby włączyć opcję Rejon warstwy cech.

  2. Uzyskaj odwołanie do warstwy cech lokalizacji przy zainicjowaniu 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 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

    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 nie można znaleźć podanego identyfikatora miejsca lub nie pasujące do wybranego typu cechy, styl nie zostanie zastosowany. Przykład: próbuję dodać styl warstwy POSTAL_CODE do identyfikatora miejsca „Nowy Jork” Miasto nie zostałby zastosowany żaden styl.

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:

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

Nazwy geograficzne pochodzą z wielu źródeł, takich jak USGS Board ds. Nazw geograficznych, oraz USA Pliki dziennika.

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ę