設定界線多邊形的樣式

總覽

如要設定界線多邊形的填滿和筆劃樣式，請使用 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：

• 使用 Places API 和 Geocoding API 搜尋區域名稱，然後找出指定範圍內區域的地點 ID。
• 從點擊事件取得資料，即可傳回與點擊區域相對應的地圖項目，並提供地點 ID、顯示名稱和地圖項目類型類別的存取權。

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

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

完整程式碼範例