設定界線多邊形的樣式

總覽

如要設定邊界多邊形的填滿和邊框樣式，您可以將地圖項目圖層上的 style 屬性設為 google.maps.FeatureStyleFunction，並定義顏色、不透明度和線條寬度的樣式屬性。

如要設定多邊形樣式，請將 style 屬性設為 google.maps.FeatureStyleFunction。您可以運用樣式函式定義邏輯，設定地圖項目圖層上個別多邊形的樣式。設定 featureLayer.style 後，樣式函式便會針對受影響地圖項目圖層中的每個地圖項目執行。系統會在您設定樣式屬性時套用該函式。如要更新，您必須再次設定樣式屬性。

針對地圖項目套用樣式函式時，樣式函式應該會永遠傳回一致的結果。舉例來說，如果您想隨機為一組地圖項目上色，隨機的部分就不應套用地圖項目樣式函式，因為這會導致意外結果。

這個函式會針對圖層中的每個地圖項目執行，因此最佳化至關重要。如要避免影響算繪時間，請執行下列操作：

僅啟用您需要的圖層。
如果圖層已不再使用，請將 style 設為 null。

如要為縣市地圖項目圖層中的多邊形設定樣式，請按照下列步驟操作：

如果尚未建立新的地圖 ID 和地圖樣式，請按照「開始使用」一文中的步驟進行。請務必啟用縣市地圖項目圖層。
在地圖初始化時，取得縣市地圖項目圖層的參照。
```
featureLayer = map.getFeatureLayer("LOCALITY");
```
建立 google.maps.FeatureStyleFunction 類型的樣式定義。

將地圖項目圖層上的 style 屬性設為 FeatureStyleFunction。下例示範如何定義函式，僅將樣式套用至地點 ID 相符的 google.maps.Feature：

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

如果找不到指定的地點 ID，或是與所選地圖項目類型不符，系統就不會套用樣式。舉例來說，如果您要為地點 ID 與「台北」相符的 POSTAL_CODE 圖層設定樣式，系統就無法套用任何樣式。

移除圖層中的樣式

如要移除圖層中的樣式，請將 style 設為 null：

featureLayer.style = null;

查詢地點 ID 來指定地圖項目

如要取得區域資料：

提出區域查詢要求來搜尋區域。
從點擊事件取得資料 (傳回與點擊區域相對應的地圖項目，並提供地點 ID、顯示名稱和地圖項目類型類別的存取權)。

使用區域涵蓋範圍檢視工具，即可查看所有支援區域的可用 Google 邊界。

涵蓋範圍會因區域而異。詳情請參閱「Google 邊界涵蓋範圍」一文。

提供地理名稱的來源很多，例如 USGS 地理名稱委員會和美國 Gazetteer 檔案。

完整程式碼範例

TypeScript

let map: google.maps.Map;
//@ts-ignore
let featureLayer;

function initMap() {
  map = new google.maps.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;
    }
  };

}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

let map;
//@ts-ignore
let featureLayer;

function initMap() {
  map = new google.maps.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;
    }
  };
}

window.initMap = 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>
    <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>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>index.html

試用範例

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell