---
title: "示例：形状与覆盖物"
description: "在 Google 地图上绘制圆形、多边形、折线、矩形和 GeoJSON 数据。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/guides/shapes-and-overlays"
last_updated: "2026-08-11T09:33:14.329Z"
---

<code-group>
<google-maps-shapes-demo label="演示">



</google-maps-shapes-demo>

```vue [源代码]
<script setup lang="ts">
const routePath = [
  { lat: -33.8568, lng: 151.2153 },
  { lat: -33.8600, lng: 151.2100 },
  { lat: -33.8650, lng: 151.2090 },
  { lat: -33.8688, lng: 151.2093 },
]

const circleOptions = {
  center: { lat: -33.8688, lng: 151.2093 },
  radius: 800,
  fillColor: '#4285F4',
  fillOpacity: 0.12,
  strokeColor: '#4285F4',
  strokeWeight: 2,
}

const polygonOptions = {
  paths: [
    { lat: -33.852, lng: 151.213 },
    { lat: -33.850, lng: 151.220 },
    { lat: -33.856, lng: 151.222 },
    { lat: -33.858, lng: 151.215 },
  ],
  fillColor: '#34a853',
  fillOpacity: 0.15,
  strokeColor: '#34a853',
  strokeWeight: 2,
}

const polylineOptions = {
  path: routePath,
  strokeColor: '#ea4335',
  strokeOpacity: 1.0,
  strokeWeight: 3,
}

const rectangleOptions = {
  bounds: {
    north: -33.870,
    south: -33.878,
    east: 151.218,
    west: 151.200,
  },
  fillColor: '#fbbc04',
  fillOpacity: 0.15,
  strokeColor: '#fbbc04',
  strokeWeight: 2,
}
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.863, lng: 151.210 },
      zoom: 14,
    }"
  >
    <ScriptGoogleMapsCircle :options="circleOptions" />
    <ScriptGoogleMapsPolygon :options="polygonOptions" />
    <ScriptGoogleMapsPolyline :options="polylineOptions" />
    <ScriptGoogleMapsRectangle :options="rectangleOptions" />
  </ScriptGoogleMaps>
</template>
```

</code-group>

将每个形状组件放置在 `<ScriptGoogleMaps>` 内部，并通过 `options` 传入相应的 Google 地图 API 选项。Google 的[形状指南](https://developers.google.com/maps/documentation/javascript/shapes)介绍了这些组件共有的几何和样式字段。

## 圆形：配送范围

```vue
<script setup lang="ts">
const center = { lat: -33.8688, lng: 151.2093 }

const circleOptions = {
  center,
  radius: 2000,
  fillColor: '#4285F4',
  fillOpacity: 0.15,
  strokeColor: '#4285F4',
  strokeOpacity: 0.8,
  strokeWeight: 2,
}
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center,
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsMarker :position="center" />
    <ScriptGoogleMapsCircle :options="circleOptions" />
  </ScriptGoogleMaps>
</template>
```

## 多边形：区域边界

```vue
<script setup lang="ts">
const zoneBoundary = [
  { lat: -33.856, lng: 151.200 },
  { lat: -33.852, lng: 151.220 },
  { lat: -33.870, lng: 151.225 },
  { lat: -33.878, lng: 151.205 },
  { lat: -33.870, lng: 151.195 },
]

const polygonOptions = {
  paths: zoneBoundary,
  fillColor: '#34a853',
  fillOpacity: 0.2,
  strokeColor: '#34a853',
  strokeWeight: 2,
}
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.865, lng: 151.210 },
      zoom: 14,
    }"
  >
    <ScriptGoogleMapsPolygon :options="polygonOptions" />
  </ScriptGoogleMaps>
</template>
```

## 折线：路线

```vue
<script setup lang="ts">
const routePath = [
  { lat: -33.8568, lng: 151.2153 },
  { lat: -33.8600, lng: 151.2100 },
  { lat: -33.8650, lng: 151.2090 },
  { lat: -33.8688, lng: 151.2093 },
]

const polylineOptions = {
  path: routePath,
  strokeColor: '#ea4335',
  strokeOpacity: 1.0,
  strokeWeight: 3,
}

const startColor = '#34a853'
const endColor = '#ea4335'
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.862, lng: 151.212 },
      zoom: 15,
    }"
  >
    <ScriptGoogleMapsPolyline :options="polylineOptions" />
    <ScriptGoogleMapsMarker :position="routePath[0]">
      <template #content>
        <div class="w-6 h-6 rounded-full border-2 border-white" :style="{ background: startColor }" />
      </template>
    </ScriptGoogleMapsMarker>
    <ScriptGoogleMapsMarker :position="routePath[routePath.length - 1]">
      <template #content>
        <div class="w-6 h-6 rounded-full border-2 border-white" :style="{ background: endColor }" />
      </template>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

## 矩形：边界框

```vue
<script setup lang="ts">
const rectangleOptions = {
  bounds: {
    north: -33.855,
    south: -33.875,
    east: 151.225,
    west: 151.195,
  },
  fillColor: '#fbbc04',
  fillOpacity: 0.15,
  strokeColor: '#fbbc04',
  strokeWeight: 2,
}
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.865, lng: 151.210 },
      zoom: 14,
    }"
  >
    <ScriptGoogleMapsRectangle :options="rectangleOptions" />
  </ScriptGoogleMaps>
</template>
```

## GeoJSON：数据层

从 URL 加载 GeoJSON，或传入内联数据。替换 `src` 会重新加载图层，而对内联对象进行嵌套修改不会触发重新加载。组件会深度监听 `style` 属性。

```vue
<script setup lang="ts">
const geoJson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [151.20, -33.87],
          [151.25, -33.87],
          [151.25, -33.90],
          [151.20, -33.90],
          [151.20, -33.87],
        ]],
      },
      properties: { name: 'Sydney CBD' },
    },
  ],
}

const geoJsonStyle = {
  fillColor: '#4285F4',
  fillOpacity: 0.3,
  strokeColor: '#4285F4',
  strokeWeight: 2,
}
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.885, lng: 151.225 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsGeoJson :src="geoJson" :style="geoJsonStyle" />
  </ScriptGoogleMaps>
</template>
```

### 远程 URL

```vue
<script setup lang="ts">
const geoJsonStyle = {
  fillColor: '#34a853',
  fillOpacity: 0.2,
  strokeWeight: 1,
}
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.885, lng: 151.225 },
      zoom: 10,
    }"
  >
    <ScriptGoogleMapsGeoJson
      src="https://example.com/boundaries.geojson"
      :style="geoJsonStyle"
    />
  </ScriptGoogleMaps>
</template>
```