---
title: "性能与可访问性"
description: "ScriptLeafletMap 默认会在接近视口时加载。此外，它会在 SSR 期间预留配置的尺寸，从而防止 Leaflet 启动时页面发生偏移。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/leaflet/guides/performance-and-accessibility"
last_updated: "2026-08-11T09:33:17.561Z"
---

`ScriptLeafletMap` 默认会在接近视口时加载。此外，它会在 SSR 期间预留配置的尺寸，从而防止 Leaflet 启动时页面发生偏移。

## 加载策略

### 默认可见

默认的 `visible` 触发器会延迟加载 SDK、样式表和瓦片请求，直到地图接近视口：

```vue
<ScriptLeafletMap :center="[-37.8136, 144.9631]" :zoom="13" />
```

### 立即加载

当地图是页面的主要内容时立即加载：

```vue
<ScriptLeafletMap
  trigger="immediate"
  :center="[-37.8136, 144.9631]"
  :zoom="13"
/>
```

你也可以使用[元素事件触发器](/docs/guides/script-triggers#element-event-triggers)，例如 `mousedown`，这样地图只会在用户明确交互后加载。

## 稳定的布局和加载状态

始终为地图设置高度。数字会被视为像素值；对于响应式布局，使用 CSS 长度效果很好：

```vue
<ScriptLeafletMap
  width="100%"
  height="clamp(24rem, 60vw, 36rem)"
  :center="[-37.8136, 144.9631]"
/>
```

当默认状态不适合页面时，请使用 `placeholder`、`loading` 和 `error` 插槽。将地址、营业时间及其他重要详情放在地图外部，以便它们在加载前和发生错误后仍然可用。

## 交互式地图

为地图指定明确的 `aria-label`，并为每个标记设置唯一的 `alt`。地图加载后，Leaflet 的键盘控件仍然可用。

```vue
<ScriptLeafletMap
  :center="[-37.8136, 144.9631]"
  :zoom="13"
  aria-label="墨尔本市中心的取货地点"
>
  <ScriptLeafletMarker
    :position="[-37.8164, 144.9656]"
    alt="Flinders Lane 取货地点"
  />
</ScriptLeafletMap>
```

文本列表应重复列出用户必须发现或选择的任何地点。仅靠视觉标记不足以完成门店选择、配送状态查看或路线导航。

## 装饰性地图

当地图仅用于装饰时，请设置 `:interactive="false"`。该组件会禁用地图输入，将其从辅助技术中隐藏，并使子控件无法交互。

```vue
<ScriptLeafletMap
  :center="[-37.8136, 144.9631]"
  :zoom="13"
  :interactive="false"
/>
```

## 自定义样式

Nuxt Scripts 会在 SDK 开始加载时注入其内置的 Leaflet 样式表。如果你的应用已经提供了 Leaflet CSS，请禁用内置副本：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  css: ['leaflet/dist/leaflet.css'],
})
```

```vue
<ScriptLeafletMap
  :center="[-37.8136, 144.9631]"
  :inject-styles="false"
/>
```

当内联样式内容安全策略阻止默认样式表注入时，也请使用相同的方法。