---
title: "<ScriptGoogleMapsInfoWindow>"
description: "显示一个锚定到标记或地图位置的信息窗口。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/api/info-window"
last_updated: "2026-08-11T09:33:14.686Z"
---

在父级标记点击时自动打开的信息窗口。将其作为 [`<ScriptGoogleMapsMarker>`](/scripts/google-maps/api/marker) 的子元素。Google 的 [信息窗口指南](https://developers.google.com/maps/documentation/javascript/infowindows) 介绍了其行为和无障碍访问指南。

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



</script-types>

## 用法

```vue
<template>
  <ScriptGoogleMaps api-key="你的 API 密钥">
    <ScriptGoogleMapsMarker
      :position="{ lat: -34.397, lng: 150.644 }"
    >
      <ScriptGoogleMapsInfoWindow>
        <div>
          <h3>澳大利亚悉尼</h3>
          <p>一座很棒的城市！</p>
        </div>
      </ScriptGoogleMapsInfoWindow>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

### 切换行为

放置在标记内时，点击标记可切换信息窗口的打开和关闭状态。当窗口处于打开状态时再次点击标记会将其关闭。内置的关闭按钮也可正常使用。

在同一个 `<ScriptGoogleMaps>` 实例中，同一时间只能打开一个锚定于标记的信息窗口。打开一个信息窗口会关闭之前的标记窗口。独立信息窗口不受此限制，因此可以同时打开多个独立信息窗口。

### 独立信息窗口

直接放置在 `<ScriptGoogleMaps>` 内部时（不在标记内），信息窗口会立即在指定位置打开。

```vue
<template>
  <ScriptGoogleMaps api-key="你的 API 密钥">
    <ScriptGoogleMapsInfoWindow
      :options="{ position: { lat: -34.397, lng: 150.644 } }"
    >
      <div>
        <h3>固定位置</h3>
        <p>此信息窗口始终在特定位置可见。</p>
      </div>
    </ScriptGoogleMapsInfoWindow>
  </ScriptGoogleMaps>
</template>
```

### 使用选项

传入 [`google.maps.InfoWindowOptions`](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions) 来自定义行为。

```vue
<template>
  <ScriptGoogleMaps api-key="你的 API 密钥">
    <ScriptGoogleMapsMarker
      :position="{ lat: -34.397, lng: 150.644 }"
    >
      <ScriptGoogleMapsInfoWindow
        :options="{
          maxWidth: 300,
          minWidth: 200,
          headerDisabled: true,
        }"
        @domready="() => console.log('信息窗口 DOM 已就绪')"
        @closeclick="() => console.log('用户关闭了信息窗口')"
      >
        <div>
          <h3>自定义宽度</h3>
          <p>此信息窗口具有受约束的尺寸且没有标题。</p>
        </div>
      </ScriptGoogleMapsInfoWindow>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

<callout>

如需完全自定义的弹出窗口（不带默认的 Google Maps 信息窗口样式），请改用 [`<ScriptGoogleMapsOverlayView>`](/scripts/google-maps/api/overlay-view)。它可以让你完全控制 HTML 结构和样式。

</callout>