---
title: "<ScriptGoogleMapsGeoJson>"
description: "将内联或远程 GeoJSON 加载到响应式 Google Maps Data 图层中。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/api/geojson"
last_updated: "2026-08-11T09:33:15.100Z"
---

通过 [GeoJSON (RFC 7946)](https://datatracker.ietf.org/doc/html/rfc7946) 和 [Google Maps Data 图层](https://developers.google.com/maps/documentation/javascript/datalayer)进行渲染。传入一个 URL 或内联 GeoJSON 对象，并将组件放置在 [`<ScriptGoogleMaps>`](/scripts/google-maps/api/script-google-maps) 内。

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



</script-types>

## 用法

### 内联 GeoJSON

```vue
<script setup lang="ts">
const geoJsonData = {
  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' },
    },
  ],
}
</script>

<template>
  <ScriptGoogleMaps
    api-key="your-api-key"
    :map-options="{
      center: { lat: -33.885, lng: 151.225 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsGeoJson
      :src="geoJsonData"
      :style="{ fillColor: '#4285F4', fillOpacity: 0.3, strokeColor: '#4285F4', strokeWeight: 2 }"
    />
  </ScriptGoogleMaps>
</template>
```

### 远程 URL

浏览器使用 XHR 获取远程 GeoJSON，因此不同源必须通过 CORS 允许该请求。Google 的 [GeoJSON 导入指南](https://developers.google.com/maps/documentation/javascript/importing_data#loading-data-across-domains)展示了所需的响应标头。

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsGeoJson
      src="https://example.com/boundaries.geojson"
      :style="{ fillColor: '#34a853', fillOpacity: 0.2, strokeWeight: 1 }"
    />
  </ScriptGoogleMaps>
</template>
```

### 动态样式函数

向 `style` 传递一个函数而非静态对象，以根据要素的属性进行样式设置。

```vue
<script setup lang="ts">
function styleFeature(feature: google.maps.Data.Feature) {
  const population = feature.getProperty('population') as number
  return {
    fillColor: population > 1000000 ? '#EA4335' : '#34a853',
    fillOpacity: 0.4,
    strokeWeight: 1,
  }
}
</script>

<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsGeoJson
      src="https://example.com/regions.geojson"
      :style="styleFeature"
    />
  </ScriptGoogleMaps>
</template>
```

### 要素点击事件

监听点击事件以构建交互式 GeoJSON 图层。事件载荷包含被点击的要素及其属性。

```vue
<script setup lang="ts">
function onFeatureClick(event: google.maps.Data.MouseEvent) {
  const name = event.feature.getProperty('name')
  console.log('Clicked:', name)
}
</script>

<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsGeoJson
      src="https://example.com/boundaries.geojson"
      :style="{ fillColor: '#4285F4', fillOpacity: 0.2 }"
      @click="onFeatureClick"
    />
  </ScriptGoogleMaps>
</template>
```

<callout>

当替换 `src` 时，该组件会清除现有要素并加载新数据。它不会观察内联 `src` 对象的嵌套变更。它会深度监听 `style`，并原地更新图层。该组件还会触发 `addfeature`、`removefeature`、`setgeometry`、`setproperty` 和 `removeproperty` 事件。

</callout>