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

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

## Introduction

`MaplibreGeolocateControl` provides a location button: clicking it requests browser geolocation and flies the map to the user's position. `options` is forwarded directly to the maplibre-gl `GeolocateControl` constructor — `trackUserLocation` enables continuous tracking, `showAccuracyCircle` toggles the accuracy circle, 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">
    <MaplibreMap :options="{ style: 'https://tiles.openfreemap.org/styles/positron', center: [116.39, 39.91], zoom: 10 }">
      <!-- 点击控件触发浏览器定位授权，授权后持续跟踪并显示位置与精度圈 -->
      <MaplibreGeolocateControl
        position="top-right"
        :options="{
          trackUserLocation: true,
          positionOptions: { enableHighAccuracy: true }
        }"
      />
    </MaplibreMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MaplibreGeolocateControl component
 */
interface MaplibreGeolocateControlProps {
  /**
   * 控件停靠位置；省略用地图默认位置
   */
  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
  /**
   * GeolocateControl 构造选项
   */
  options?: GeolocateControlOptions | undefined;
}
```

## Changelog

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


## Sitemap

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