设置边界多边形的样式

概览

若要为边界多边形设置填充和描边样式，您可以将地图项图层中的 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 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;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