設定界線多邊形的樣式

選取平台： Android iOS JavaScript

總覽

如要設定界線多邊形的填滿和筆劃樣式，請使用 FeatureStyleOptions 定義樣式屬性，並將地圖項目圖層上的 style 屬性設為 google.maps.FeatureStyleFunction (包含樣式邏輯)。

以下地圖範例說明如何使用界線多邊形突顯單一區域。

如要為界線地圖項目套用樣式，請將 style 屬性設為 google.maps.FeatureStyleFunction (可包含樣式邏輯)。樣式函式會針對受影響地圖項目圖層中的每個地圖項目執行，而且會在設定樣式屬性時套用。如要更新，請務必再次設定樣式屬性。

如要統一地圖項目圖層中所有地圖項目的樣式，請將 style 屬性設為 google.maps.FeatureStyleOptions。在此情況下，由於不必採用樣式邏輯，因此也不需要使用地圖項目樣式函式。

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

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

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

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

  1. 如果尚未建立新的地圖 ID 和地圖樣式，請按照「開始使用」一文中的步驟進行。請務必啟用縣市地圖項目圖層。

  2. 在地圖初始化時，取得縣市地圖項目圖層的參照。

    featureLayer = map.getFeatureLayer("LOCALITY");

  3. 建立 google.maps.FeatureStyleFunction 類型的樣式定義。

  4. 將地圖項目圖層上的 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 邊界涵蓋範圍」一文。

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

完整程式碼範例

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

測試範例