總覽
如要設定邊界多邊形的填滿和邊框樣式,您可以將地圖項目圖層上的 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; } };
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; } };
如果找不到指定的地點 ID,或是與所選地圖項目類型不符,系統就不會套用樣式。舉例來說,如果您要為地點 ID 與「台北」相符的 POSTAL_CODE
圖層設定樣式,系統就無法套用任何樣式。
移除圖層中的樣式
如要移除圖層中的樣式,請將 style
設為 null
:
featureLayer.style = null;
查詢地點 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;
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;
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; }
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>