---
title: "示例：标记和信息窗口"
description: "在 Google 地图中添加高级标记、信息窗口和自定义 HTML 弹窗。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/guides/markers-and-info-windows"
last_updated: "2026-08-11T09:33:14.090Z"
---

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



</google-maps-markers-demo>

```vue [源代码]
<script setup lang="ts">
const showPopup = ref(false)

const greenPin = {
  background: '#34a853',
  borderColor: '#1e8e3e',
  glyphColor: '#fff',
}
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.8600, lng: 151.2100 },
      zoom: 14,
    }"
  >
    <!-- 简单标记和信息窗口 -->
    <ScriptGoogleMapsMarker :position="{ lat: -33.8568, lng: 151.2153 }">
      <ScriptGoogleMapsInfoWindow>
        <strong>悉尼歌剧院</strong>
        <p>标志性的表演艺术场所</p>
      </ScriptGoogleMapsInfoWindow>
    </ScriptGoogleMapsMarker>

    <!-- 彩色图钉 -->
    <ScriptGoogleMapsMarker :position="{ lat: -33.8523, lng: 151.2108 }">
      <template #content>
        <div class="w-6 h-6 rounded-full border-2" :style="{ background: greenPin.background, borderColor: greenPin.borderColor }" />
      </template>
    </ScriptGoogleMapsMarker>

    <!-- 带弹窗的自定义 HTML 标记 -->
    <ScriptGoogleMapsMarker
      :position="{ lat: -33.8688, lng: 151.2093 }"
      @click="showPopup = !showPopup"
    >
      <template #content>
        <div class="bg-blue-600 text-white px-2.5 py-1 rounded-full font-bold">
          120 万澳元
        </div>
      </template>
      <ScriptGoogleMapsOverlayView
        v-model:open="showPopup"
        anchor="bottom-center"
        :offset="{ x: 0, y: -40 }"
      >
        <div class="bg-white p-3 px-4 rounded-lg shadow-lg max-w-[200px]">
          <strong>市政厅</strong>
          <p>3 室 2 卫公寓</p>
          <button @click.stop="showPopup = false">
            关闭
          </button>
        </div>
      </ScriptGoogleMapsOverlayView>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

</code-group>

这些示例基于 Google 的[高级标记](https://developers.google.com/maps/documentation/javascript/advanced-markers/overview)和[信息窗口](https://developers.google.com/maps/documentation/javascript/infowindows)构建。如果需要使用组件属性之外的选项，请参考这些指南。

## 简单标记

```vue
<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsMarker
      :position="{ lat: -33.8568, lng: 151.2153 }"
    />
    <ScriptGoogleMapsMarker
      :position="{ lat: -33.8688, lng: 151.2093 }"
    />
  </ScriptGoogleMaps>
</template>
```

## 彩色图钉

使用 `#content` 插槽来自定义图钉外观。

```vue
<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsMarker :position="{ lat: -33.8568, lng: 151.2153 }">
      <template #content>
        <div class="w-7 h-7 rounded-full border-2 bg-[#FF0000] border-[#CC0000]" />
      </template>
    </ScriptGoogleMapsMarker>
    <ScriptGoogleMapsMarker :position="{ lat: -33.8688, lng: 151.2093 }">
      <template #content>
        <div class="w-6 h-6 rounded-full border-2 bg-[#4285F4] border-[#1a73e8]" />
      </template>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

## 自定义 HTML 标记

`#content` 插槽用任意 Vue 模板替换默认图钉。适用于价格标签、头像或状态指示器。

```vue
<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsMarker
      v-for="listing in listings"
      :key="listing.id"
      :position="listing.position"
    >
      <template #content>
        <div class="bg-blue-600 text-white px-2.5 py-1 rounded-full font-bold text-sm whitespace-nowrap">
          {{ listing.price }}
        </div>
      </template>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

## 信息窗口

`ScriptGoogleMapsInfoWindow` 在点击父标记时自动打开。

```vue
<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsMarker :position="{ lat: -33.8568, lng: 151.2153 }">
      <ScriptGoogleMapsInfoWindow>
        <h3>悉尼歌剧院</h3>
        <p>悉尼港上标志性的表演艺术场所。</p>
      </ScriptGoogleMapsInfoWindow>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

## 使用 OverlayView 的自定义弹窗

与限制标记结构的 `InfoWindow` 不同，`ScriptGoogleMapsOverlayView` 可以完全控制弹窗的 HTML 和样式。

使用 `v-model:open` 切换可见性，无需重新挂载组件。

```vue
<script setup lang="ts">
const showPopup = ref(false)
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsMarker
      :position="{ lat: -33.8688, lng: 151.2093 }"
      @click="showPopup = !showPopup"
    >
      <ScriptGoogleMapsOverlayView
        v-model:open="showPopup"
        anchor="bottom-center"
        :offset="{ x: 0, y: -50 }"
      >
        <div class="bg-white p-3 px-4 rounded-lg shadow-lg max-w-[200px]">
          <p class="m-0 mb-2">
            由你的应用设置样式的 Vue 内容。
          </p>
          <button @click.stop="showPopup = false">
            关闭
          </button>
        </div>
      </ScriptGoogleMapsOverlayView>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

## 动态标记

使用 `v-for` 配合响应式数组动态添加和移除标记。

```vue
<script setup lang="ts">
const markers = ref([
  { lat: -33.8568, lng: 151.2153 },
  { lat: -33.8688, lng: 151.2093 },
])

function addMarker() {
  markers.value.push({
    lat: -33.86 + Math.random() * 0.02,
    lng: 151.20 + Math.random() * 0.02,
  })
}
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsMarker
      v-for="pos in markers"
      :key="`${pos.lat},${pos.lng}`"
      :position="pos"
    />
  </ScriptGoogleMaps>
  <button @click="addMarker">
    添加标记
  </button>
</template>
```