---
title: "性能"
description: "延迟加载 Maps JavaScript API，预留地图空间，并减少不必要的动态地图加载。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/guides/performance"
last_updated: "2026-08-11T09:33:14.050Z"
---

`ScriptGoogleMaps` 会等待用户交互后才请求 Maps JavaScript API。除非你添加静态地图或其他预览内容，否则占位区域会保持空白。Google 还建议使用 API 的异步加载路径，Nuxt Scripts 注册表通过 `loading=async` 和回调函数使用该路径。请参阅 Google 的[加载指南](https://developers.google.com/maps/documentation/javascript/load-maps-js-api)。

## 加载策略

### 默认：延迟加载

默认情况下，地图会在 `mouseenter`、`mouseover` 或 `mousedown` 事件触发时加载。未触发地图的页面浏览不会加载 Maps JavaScript API。

```vue
<template>
  <!-- 在首次悬停/点击时加载 JS API -->
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 12,
    }"
  />
</template>
```

### 立即加载

跳过交互触发条件，但仍会等待客户端 hydration 和 Nuxt 的空闲回调，然后再加载 JavaScript API。当地图是主要内容并且应在 hydration 后尽快变得可交互时，可以使用此选项。

```vue
<template>
  <ScriptGoogleMaps
    trigger="immediate"
    :map-options="{
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 12,
    }"
  />
</template>
```

<callout color="amber">

地图加载会触发 [Dynamic Maps SKU](https://developers.google.com/maps/documentation/javascript/usage-and-billing)，无论启动加载的触发器是什么。使用 `trigger="immediate"` 时，每次渲染该组件的访问都可能触发地图加载。有关当前价格，请参阅[计费与权限](/scripts/google-maps/guides/billing)。

</callout>

### 自定义触发器

你可以使用任何 [元素事件触发器](/docs/guides/script-triggers#element-event-triggers) 来精确控制地图何时加载。

```vue
<template>
  <!-- 仅在明确点击时加载 -->
  <ScriptGoogleMaps trigger="mousedown" />

  <!-- 当元素进入视口时加载 -->
  <ScriptGoogleMaps trigger="visible" />
</template>
```

## 占位图优化

### 首屏

当地图无需滚动即可可见时，使用 `#placeholder` 插槽提供一张预加载的自定义图片，以避免产生静态地图 API 费用。

### 自定义占位图

默认情况下，该插槽为空。在不创建静态地图 API 事件的情况下添加自己的预览；有关用法，请参阅 [`#placeholder` 插槽](/scripts/google-maps/api/script-google-maps#slots)。

## 标记性能

渲染大量标记时，请考虑使用[标记聚类](/scripts/google-maps/guides/marker-clustering)。在较低的缩放级别下，聚类器会将相近的标记组替换为一个聚类标记；Google 在其[标记聚类指南](https://developers.google.com/maps/documentation/javascript/marker-clustering)中将此描述为一种在标记彼此靠近时提高可读性的方法。

有关完整的费用明细和优化策略，请参阅 [计费与权限](/scripts/google-maps/guides/billing)。