概览
若要为边界多边形设置填充和描边样式,您可以将地图项图层中的 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 以定位地图项
如需获取地区数据,请执行以下操作:
- 发出地区查找请求以搜索相应地区。
- 从点击事件中获取数据(返回与所点击地区相对应的地图项,这提供了对其地点 ID、显示名称和地图项类型类别的访问权限)。
使用地区覆盖范围查看器查看所有支持地区的可用 Google 边界。
覆盖范围因地区而异。如需了解详情,请参阅 Google 边界覆盖范围。
您可以从许多来源获取地理位置名称,例如 USGS Board on Geographic Names(美国地名委员会)和 U.S. Gazetteer Files(美国地名档案)。
完整示例代码
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>