MapboxGeolocateControl

定位控件，点击后请求浏览器定位并在地图上跟踪用户位置与方向。

简介

MapboxGeolocateControl 提供定位按钮：点击后请求浏览器地理定位并将视图移至用户位置。options 直通 mapbox-gl 的 GeolocateControl 构造选项，trackUserLocation 持续跟踪、showUserHeading 显示方向锥、positionOptions.enableHighAccuracy 提升精度。

浏览器定位需在 HTTPS（或 localhost）下运行，并由用户在弹窗中授权；未授权或不支持时按钮不会移动视图。

用法

点击控件触发定位授权，授权后持续跟踪并显示方向：

<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

Prop	Default	Type
`position`		`"top-left" \| "top" \| "top-right" \| "right" \| "bottom-right" \| "bottom" \| "bottom-left" \| "left"` 控件停靠位置；省略用地图默认位置
`options`		`mapboxgl.GeolocateControlOptions` GeolocateControl 构造选项 https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol

Changelog

No recent changes

MapboxNavigationControl

导航控件，提供缩放按钮与指北罗盘，position 控制停靠角，options 透传至 mapbox-gl。

MapboxFullscreenControl

全屏控件，点击在全屏与常态间切换地图容器。