VGeolocateControl

VGeolocateControl 控件用于控制地图的地理定位功能。

• 配置文档

提示

如果您在浏览器设置中禁用了地理定位，或者使用的浏览器不支持 Geolocation API，则 GeolocateControl 按钮将显示为禁用状态，并且地图将不会显示用户的位置。

基础用法

geolocate-control.vue

<script lang="ts" setup>
import { getTdtRandomToken } from '@movk-repo/libs'
import { VGeolocateControl, VMapbox, VTianditu } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()

function locationend(position: GeolocationPosition) {
  ElMessage.success(`Your location is ${position.coords.latitude}, ${position.coords.longitude}`)
}
</script>

<template>
  <VMapbox :access-token="accessToken">
    <VTianditu type="img_w" :token="token" />
    <VGeolocateControl position="top-right" :position-options="{ enableHighAccuracy: true }" @geolocate="locationend" />
  </VMapbox>
</template>

隐藏源代码

API

geolocateControlProps

属性名	说明	类型	默认值
position	控件位置	string	top-right
positionOptions	地理定位的选项参数	object	{ enableHighAccuracy: false, timeout: 6000 }
fitBoundsOptions	设置地图视野的选项	object	{ maxZoom: 15 }
trackUserLocation	是否跟踪用户位置	boolean	false
showAccuracyCircle	是否显示精度圈	boolean	true
showUserLocation	是否显示用户位置	boolean	true
showUserHeading	是否显示用户方向	boolean	true
geolocation	地理位置信息	object	window.navigator.geolocation
defaultOptions	控件默认选项	object	-

geolocateControlEmits

事件名	说明	回调参数
add	控件添加完成后触发	Function
remove	控件移除完成后触发	Function
error	定位出错时触发	Function
geolocate	成功定位时触发	Function
outofmaxbounds	位置超出最大边界时触发	Function
trackuserlocationstart	开始跟踪用户位置	Function
trackuserlocationend	停止跟踪用户位置	Function

类型定义

GeolocateControlLoadEvent

control/GeolocateControl/GeolocateControl.ts

export interface GeolocateControlLoadEvent {
  type: 'geolocate'
  control: GeolocateControl
  map: Map
}