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

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

::script-types{script-key="google-maps" filter="ScriptGoogleMapsCircle"}
::

## 用法

```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()`{lang="ts"}，因此你可以动态更改半径、颜色或位置而无需重新挂载组件。
::

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.