---
title: "defineMapboxControl"
description: "用回调式 onAdd / onRemove 快速定义一个自定义 Mapbox 控件。"
seo_title: "defineMapboxControl"
seo_description: "Quickly define a custom Mapbox IControl with callback-style onAdd and onRemove instead of writing a control class."
canonical_url: "https://mapbox.mhaibaraai.cn/docs/composables/define-mapbox-control"
---
# defineMapboxControl

> 用回调式 onAdd / onRemove 快速定义一个自定义 Mapbox 控件。

## 简介

`defineMapboxControl` 用回调式 `onAdd` / `onRemove` 快速定义一个符合 `IControl` 接口的自定义控件，省去手写控件类的样板。`onAdd` 返回控件的 DOM 元素，`onRemove` 负责清理。返回的对象可直接传给 `map.addControl`。

> \[\!NOTE\]
> 
> 本助手只产出控件对象，不负责挂载。结合 
> 
> useMap
> 
>  / 
> 
> useMapbox
> 
>  取得地图后调用 
> 
> addControl
> 
>  即可。

## 用法

定义一个「回到原点」按钮控件并添加到地图：

```vue [DefineMapboxControlExample.vue]
<script setup lang="ts">
const mapId = 'define-mapbox-control-demo'
const home: [number, number] = [116.397, 39.908]

// 回调式定义控件：onAdd 返回 DOM 元素，点击回到原点
const control = defineMapboxControl(
  (map) => {
    const group = document.createElement('div')
    group.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
    const button = document.createElement('button')
    button.type = 'button'
    button.title = '回到原点'
    button.textContent = '⌖'
    button.addEventListener('click', () => map.flyTo({ center: home, zoom: 11 }))
    group.appendChild(button)
    return group
  },
  () => {}
)

onMounted(() => {
  useMapbox(mapId)?.whenLoaded().then(map => map.addControl(control, 'top-right'))
})
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap :map-id="mapId" :options="{ style: 'mapbox://styles/mapbox/light-v11', center: home, zoom: 11 }" />
  </div>
</template>
```

## API

### `defineMapboxControl()`

创建自定义控件对象。

**onAdd** (`(map: Map) => HTMLElement`) *required*: 控件添加到地图时调用，返回控件的 DOM 元素。

**onRemove** (`(map: Map) => void`) *required*: 控件从地图移除时调用，负责清理。

返回 `IControl`：可直接传给 `map.addControl` 的控件对象。

## Changelog

See commit history for [src/runtime/composables/defineMapboxControl.ts](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/composables/defineMapboxControl.ts).


## Sitemap

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