---
title: "MaplibreMinimap"
description: "鹰眼控件，缩略显示主图周边并标出当前视口，可拖拽或点击导航。"
canonical_url: "https://maplibre.mhaibaraai.cn/docs/controls/minimap"
---
# MaplibreMinimap

> 鹰眼控件，缩略显示主图周边并标出当前视口，可拖拽或点击导航。

## 简介

`MaplibreMinimap` 在控件容器内创建一个非交互的缩略地图：它随主图移动同步中心，缩放级别为主图叠加 `zoomOffset`，并以多边形标出主图当前视口（旋转、倾斜时同样贴合）。在鹰眼上拖拽会按增量平移主图，单击则把主图中心缓动到点击处。

> [!NOTE]
> 
> 省略 
> 
> map-style
> 
>  时鹰眼沿用主图当前样式（含运行时添加的图层，如天地图底图），并在主图切换样式后跟随更新。修改任一 prop 都会重建鹰眼。

## 用法

右下角的鹰眼沿用主图样式：

```vue [MinimapExample.vue]
<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MaplibreMap :options="{ style: 'https://tiles.openfreemap.org/styles/liberty', center: [116.397, 39.908], zoom: 10 }">
      <MaplibreMinimap position="bottom-right" />
    </MaplibreMap>
  </div>
</template>
```

## 示例

### 自定义样式与尺寸

指定 `map-style`、`zoom-offset`、尺寸与视口框颜色，主图旋转、倾斜时视口框随之变形：

```vue [MinimapStyleExample.vue]
<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MaplibreMap :options="{ style: 'https://tiles.openfreemap.org/styles/liberty', center: [121.47, 31.23], zoom: 12, pitch: 45, bearing: -20 }">
      <MaplibreMinimap
        position="top-right"
        map-style="https://tiles.openfreemap.org/styles/positron"
        :zoom-offset="-5"
        :width="240"
        :height="160"
        color="#f43f5e"
      />
    </MaplibreMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MaplibreMinimap component
 */
interface MaplibreMinimapProps {
  /**
   * 控件停靠位置；省略用地图默认位置
   */
  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
  /**
   * 鹰眼底图样式（对象或样式 URL）；省略时沿用主图样式并跟随其切换
   */
  mapStyle?: string | StyleSpecification | undefined;
  /**
   * 相对主图的缩放偏移
   * @default -4
   */
  zoomOffset?: number | undefined;
  /**
   * 宽度（px）
   * @default 200
   */
  width?: number | undefined;
  /**
   * 高度（px）
   * @default 150
   */
  height?: number | undefined;
  /**
   * 视口框颜色
   * @default '#3b82f6'
   */
  color?: string | undefined;
}
```

## Changelog

See commit history for [src/runtime/components/controls/Minimap.vue](https://github.com/mhaibaraai/movk-maplibre/commits/main/src/runtime/components/controls/Minimap.vue).


## Sitemap

See the full [sitemap](https://maplibre.mhaibaraai.cn/sitemap.md) for all pages.