---
title: "<ScriptMapLibreFullscreenControl>"
description: "将 MapLibre 的全屏按钮添加到最近的父级地图。默认情况下，地图容器会进入全屏。传入 options.container 可使其他元素进入全屏。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/maplibre/api/fullscreen-control"
last_updated: "2026-09-23T10:33:13.403Z"
---

将 MapLibre 的全屏按钮添加到最近的父级地图。默认情况下，地图容器会进入全屏。传入 `options.container` 可使其他元素进入全屏。

```vue
<template>
  <ScriptMapLibreMap map-style="https://tiles.openfreemap.org/styles/liberty" :center="[147.33, -42.88]">
    <ScriptMapLibreFullscreenControl
      position="top-right"
      @fullscreenstart="console.log('fullscreen')"
      @fullscreenend="console.log('windowed')"
    />
  </ScriptMapLibreMap>
</template>
```

`new maplibregl.FullscreenControl()`{lang="ts"} 在创建控件时读取一次 `options` 和 `position`。如需应用更改，请更改组件的 `key`。

如果浏览器没有 Fullscreen API，或者 `options.pseudo` 为 `true`，MapLibre 会改用 CSS 扩展地图。

::script-types{script-key="maplibre" filter="ScriptMapLibreFullscreenControl"}
::

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.