---
title: "<ScriptGoogleMapsCircle>"
description: "绘制响应式圆形覆盖层并处理其地图事件。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/api/circle"
last_updated: "2026-08-11T09:33:14.871Z"
---

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

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



</script-types>

## 用法

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsCircle
      :options="{
        center: { lat: -34.397, lng: 150.644 },
        radius: 1000,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
      }"
    />
  </ScriptGoogleMaps>
</template>
```

### 可编辑与可拖动

允许用户交互式地调整圆形大小或重新定位。

```vue
<script setup lang="ts">
function onRadiusChanged() {
  console.log('半径已改变')
}
function onCenterChanged() {
  console.log('中心已改变')
}
</script>

<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsCircle
      :options="{
        center: { lat: -34.397, lng: 150.644 },
        radius: 1000,
        editable: true,
        draggable: true,
        fillColor: '#4285F4',
        fillOpacity: 0.2,
      }"
      @radius_changed="onRadiusChanged"
      @center_changed="onCenterChanged"
    />
  </ScriptGoogleMaps>
</template>
```

### 点击事件

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsCircle
      :options="{
        center: { lat: -34.397, lng: 150.644 },
        radius: 500,
        clickable: true,
        fillColor: '#34a853',
        fillOpacity: 0.3,
      }"
      @click="(e) => console.log('点击位置', e.latLng?.toJSON())"
    />
  </ScriptGoogleMaps>
</template>
```

<callout>

`options` 属性是深度响应式的。更新它会内部调用 `circle.setOptions()`，因此你可以动态更改半径、颜色或位置而无需重新挂载组件。

</callout>