---
title: "<ScriptGoogleMapsPolygon>"
description: "绘制响应式多边形覆盖物，包括可编辑多边形和带孔洞的多边形。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/api/polygon"
last_updated: "2026-08-11T09:33:15.004Z"
---

地图上的多边形形状覆盖物。将其放置在 [`<ScriptGoogleMaps>`](/scripts/google-maps/api/script-google-maps) 组件内。其选项对应于 [`google.maps.PolygonOptions`](https://developers.google.com/maps/documentation/javascript/reference/polygon#PolygonOptions)。

<script-types filter="ScriptGoogleMapsPolygon" script-key="google-maps">



</script-types>

## 用法

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsPolygon
      :options="{
        paths: [
          { lat: -34.397, lng: 150.644 },
          { lat: -34.407, lng: 150.654 },
          { lat: -34.417, lng: 150.634 },
        ],
        fillColor: '#0000FF',
        fillOpacity: 0.3,
        strokeWeight: 2,
      }"
    />
  </ScriptGoogleMaps>
</template>
```

### 带孔的多边形

向 `paths` 传入数组的数组，即可在多边形中裁剪出孔洞。第一个数组定义外部边界；后续数组定义孔洞。Google 要求每个内部路径使用与外部路径相反的[绕行方向](https://developers.google.com/maps/documentation/javascript/shapes#polygon_holes)。

```vue
<template>
  <ScriptGoogleMaps
    api-key="your-api-key"
    :map-options="{
      center: { lat: -34.404, lng: 150.644 },
      zoom: 14,
    }"
  >
    <ScriptGoogleMapsPolygon
      :options="{
        paths: [
          [
            { lat: -34.390, lng: 150.630 },
            { lat: -34.390, lng: 150.660 },
            { lat: -34.420, lng: 150.660 },
            { lat: -34.420, lng: 150.630 },
          ],
          [
            { lat: -34.400, lng: 150.640 },
            { lat: -34.410, lng: 150.640 },
            { lat: -34.410, lng: 150.650 },
            { lat: -34.400, lng: 150.650 },
          ],
        ],
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        strokeWeight: 2,
      }"
    />
  </ScriptGoogleMaps>
</template>
```

### 可编辑的多边形

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsPolygon
      :options="{
        paths: [
          { lat: -34.397, lng: 150.644 },
          { lat: -34.407, lng: 150.654 },
          { lat: -34.417, lng: 150.634 },
        ],
        editable: true,
        draggable: true,
        fillColor: '#4285F4',
        fillOpacity: 0.2,
      }"
      @click="(e) => console.log('点击位置', e.latLng?.toJSON())"
    />
  </ScriptGoogleMaps>
</template>
```

<callout>

多边形鼠标事件会发出 [`google.maps.PolyMouseEvent`](https://developers.google.com/maps/documentation/javascript/reference/polygon#PolyMouseEvent)。对于可编辑的几何图形，其中可选的 `vertex`、`edge` 和 `path` 索引用于标识路径中受影响的部分。该组件会深度监听 `options` 属性。

</callout>