---
title: "<ScriptGoogleMapsRectangle>"
description: "绘制一个支持调整大小、拖动和指针事件的响应式矩形地图叠加层。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/api/rectangle"
last_updated: "2026-08-11T09:33:14.975Z"
---

地图上的矩形叠加层。将其放置在 [`<ScriptGoogleMaps>`](/scripts/google-maps/api/script-google-maps) 组件内。其选项对应于 [`google.maps.RectangleOptions`](https://developers.google.com/maps/documentation/javascript/reference/polygon#RectangleOptions)。

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



</script-types>

## 用法

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsRectangle
      :options="{
        bounds: {
          north: -34.387,
          south: -34.407,
          east: 150.664,
          west: 150.624,
        },
        fillColor: '#00FF00',
        fillOpacity: 0.25,
        strokeWeight: 2,
      }"
    />
  </ScriptGoogleMaps>
</template>
```

### 可编辑和可拖动

允许用户以交互方式调整矩形大小或重新定位。

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsRectangle
      :options="{
        bounds: {
          north: -34.387,
          south: -34.407,
          east: 150.664,
          west: 150.624,
        },
        editable: true,
        draggable: true,
        fillColor: '#4285F4',
        fillOpacity: 0.15,
      }"
      @bounds_changed="() => console.log('Bounds changed')"
      @click="(e) => console.log('Clicked at', e.latLng?.toJSON())"
    />
  </ScriptGoogleMaps>
</template>
```

<callout>

`options` 属性是深度响应式的。更新它会内部调用 `rectangle.setOptions()`，因此你可以动态更改边界、颜色或可编辑性而无需重新挂载。

</callout>