---
title: "<ScriptGoogleMapsMarker>"
description: "添加一个支持响应式的高级标记，可选择使用自定义 Vue 内容。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/api/marker"
last_updated: "2026-08-11T09:33:14.743Z"
---

支持 HTML 内容的地图标记。放置在 [`<ScriptGoogleMaps>`](/scripts/google-maps/api/script-google-maps) 组件内部。

此组件使用 Google 的 [`AdvancedMarkerElement`](https://developers.google.com/maps/documentation/javascript/advanced-markers/start)，该组件需要地图 ID。Nuxt Scripts 会回退使用 Google 的 `DEMO_MAP_ID`，但 Google 保留该 ID 供测试使用；在生产环境中，请传入你自己的 `mapId`。

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



</script-types>

## 用法

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsMarker
      :position="{ lat: -34.407, lng: 150.654 }"
    />
  </ScriptGoogleMaps>
</template>
```

### 自定义标记内容

`#content` 插槽将默认图钉替换为任何 HTML 或 Vue 内容。插槽内容将成为地图上标记的视觉呈现。

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsMarker
      :position="{ lat: -34.397, lng: 150.644 }"
    >
      <template #content>
        <div class="bg-green-600 text-white px-2.5 py-1 rounded-full font-bold">
          $420k
        </div>
      </template>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

### 可拖拽标记

在 `options` 属性中使用 `gmpDraggable` 启用拖拽。监听拖拽事件以跟踪位置变化。

```vue
<script setup lang="ts">
function onDragEnd(e: google.maps.MapMouseEvent) {
  console.log('New position:', e.latLng?.toJSON())
}
</script>

<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsMarker
      :position="{ lat: -34.397, lng: 150.644 }"
      :options="{ gmpDraggable: true }"
      @dragend="onDragEnd"
    />
  </ScriptGoogleMaps>
</template>
```

### 点击事件

标记默认是可点击的。使用 `@click` 来处理交互。

```vue
<script setup lang="ts">
const selected = ref<string | null>(null)
const locations = [
  { id: 'sydney', name: 'Sydney', position: { lat: -33.8688, lng: 151.2093 } },
  { id: 'melbourne', name: 'Melbourne', position: { lat: -37.8136, lng: 144.9631 } },
]
</script>

<template>
  <ScriptGoogleMaps
    api-key="your-api-key"
    :map-options="{
      center: { lat: -35.5, lng: 148 },
      zoom: 5,
    }"
  >
    <ScriptGoogleMapsMarker
      v-for="loc in locations"
      :key="loc.id"
      :position="loc.position"
      @click="selected = loc.id"
    >
      <ScriptGoogleMapsInfoWindow v-if="selected === loc.id">
        <div>{{ loc.name }}</div>
      </ScriptGoogleMapsInfoWindow>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

### 使用自定义覆盖层

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsMarker
      :position="{ lat: -34.397, lng: 150.644 }"
      :options="{ gmpDraggable: true }"
    >
      <ScriptGoogleMapsOverlayView
        anchor="bottom-center"
        :offset="{ x: 0, y: -50 }"
      >
        <div class="custom-tooltip">
          自定义 Vue 内容
        </div>
      </ScriptGoogleMapsOverlayView>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>
```

### 集群器集成

当放置在 [`<ScriptGoogleMapsMarkerClusterer>`](/scripts/google-maps/api/marker-clusterer) 内部时，集群器会自动注册标记。无需额外配置。

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsMarkerClusterer>
      <ScriptGoogleMapsMarker
        v-for="loc in locations"
        :key="loc.id"
        :position="loc.position"
      />
    </ScriptGoogleMapsMarkerClusterer>
  </ScriptGoogleMaps>
</template>
```

<callout>

`position` 和 `options` 都是响应式的。该组件会强制设置 `gmpClickable: true`，并转发 `gmp-click` DOM 事件。在运行时，点击载荷是 Google 的 `AdvancedMarkerClickEvent`，但当前的 Vue 发出事件类型错误地声明为 `MapMouseEvent`。

</callout>