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

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

<script-types filter="ScriptMapLibreMap" script-key="maplibre">



</script-types>

`mapStyle`、`center`、`zoom`、`bearing` 和 `pitch` 都是响应式的。如果还希望接收用户进行的相机变更，请使用它们的 `v-model` 绑定。

```vue
<ScriptMapLibreMap
  v-model:center="center"
  v-model:zoom="zoom"
  v-model:bearing="bearing"
  map-style="https://demotiles.maplibre.org/style.json"
  width="100%"
  height="28rem"
  @ready="({ map }) => console.log(map.value)"
>
  <template #description>
    一张街道地图，其中在选定的办公室处有一个标记。
  </template>
</ScriptMapLibreMap>
```

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