---
title: "<ScriptLeafletMap>"
description: "地图外观组件在 SSR 期间预留布局空间，在触发时加载 Leaflet，创建 L.Map，并将其提供给子组件。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/leaflet/api/script-leaflet-map"
last_updated: "2026-08-11T09:33:17.640Z"
---

地图外观组件在 SSR 期间预留布局空间，在触发时加载 Leaflet，创建 `L.Map`，并将其提供给子组件。

<script-types filter="ScriptLeafletMap" script-key="leaflet">



</script-types>

`center` 和 `zoom` 具有响应性。当你还希望接收用户平移和缩放变化时，请使用 `v-model:center` 或 `v-model:zoom`。

```vue
<ScriptLeafletMap
  v-model:center="center"
  v-model:zoom="zoom"
  width="100%"
  height="28rem"
  @ready="({ map }) => console.log(map.value)"
/>
```

`placeholder`、`awaitingLoad`、`loading` 和 `error` 插槽可自定义每个加载状态。默认错误状态可见，并通过 `role="alert"` 播报。