---
title: "MapboxGeolocateControl"
description: "Geolocation control that requests browser location on click and tracks the user's position and heading on the map."
canonical_url: "https://mapbox.mhaibaraai.cn/en/docs/controls/geolocate"
---
# MapboxGeolocateControl

> Geolocation control that requests browser location on click and tracks the user's position and heading on the map.

## Introduction

`MapboxGeolocateControl` provides a location button: clicking it requests browser geolocation and flies the map to the user's position. `options` is forwarded directly to the mapbox-gl `GeolocateControl` constructor — `trackUserLocation` enables continuous tracking, `showUserHeading` renders a direction cone, and `positionOptions.enableHighAccuracy` improves accuracy.

> [!NOTE]
> 
> Browser geolocation requires HTTPS (or localhost) and must be granted by the user in the permission prompt. If permission is denied or geolocation is unsupported, clicking the button will not move the map.

## Usage

Click the control to trigger the location permission prompt. Once granted, the map continuously tracks position and displays heading:

```vue [GeolocateControlExample.vue]
<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap :options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.39, 39.91], zoom: 10 }">
      <!-- 点击控件触发浏览器定位授权，授权后持续跟踪并显示方向锥 -->
      <MapboxGeolocateControl
        position="top-right"
        :options="{
          trackUserLocation: true,
          showUserHeading: true,
          positionOptions: { enableHighAccuracy: true }
        }"
      />
    </MapboxMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MapboxGeolocateControl component
 */
interface MapboxGeolocateControlProps {
  /**
   * 控件停靠位置；省略用地图默认位置
   */
  position?: mapboxgl.ControlPosition | undefined;
  /**
   * GeolocateControl 构造选项
   */
  options?: mapboxgl.GeolocateControlOptions | undefined;
}
```

## Changelog

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


## Sitemap

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