VueUse中文文档useGeolocation
响应式 Geolocation API。允许用户向 web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。
Reactive Geolocation API. It allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
例子
{
"coords": {
"accuracy": 0,
"latitude": null,
"longitude": null,
"altitude": null,
"altitudeAccuracy": null,
"heading": null,
"speed": null
},
"locatedAt": null,
"error": null
}Usage
js
import { useGeolocation } from '@vueuse/core'
const { coords, locatedAt, error, resume, pause } = useGeolocation()
import { useGeolocation } from '@vueuse/core'
const { coords, locatedAt, error, resume, pause } = useGeolocation()
| State | Type | Description |
|---|---|---|
| coords | Coordinates | 位置信息，如纬度和经度 |
| locatedAt | Date | 最后一次定位时间 |
| error | string | 定位失败的失败消息 |
| resume | function | 操作函数更新位置 |
| pause | function | 操作函数暂停更新位置 |
Config
useGeolocation 函数将PositionOptions对象作为可选参数。
useGeolocation function takes PositionOptions object as an optional parameter.
Component Usage
该函数还通过
@vueuse/components提供了一个无渲染的组件版本。了解更多.
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UseGeolocation v-slot="{ coords: { latitude, longitude } }">
Latitude: {{ latitude }}
Longitude: {{ longitude }}
</UseGeolocation>
<UseGeolocation v-slot="{ coords: { latitude, longitude } }">
Latitude: {{ latitude }}
Longitude: {{ longitude }}
</UseGeolocation>
Type Declarations
typescript
export interface UseGeolocationOptions
extends Partial<PositionOptions>,
ConfigurableNavigator {
immediate?: boolean
}
/**
* Reactive Geolocation API.
*
* @see https://vueuse.org/useGeolocation
* @param options
*/
export declare function useGeolocation(options?: UseGeolocationOptions): {
isSupported: Ref<boolean>
coords: Ref<GeolocationCoordinates>
locatedAt: Ref<number | null>
error: Ref<{
readonly code: number
readonly message: string
readonly PERMISSION_DENIED: number
readonly POSITION_UNAVAILABLE: number
readonly TIMEOUT: number
} | null>
resume: () => void
pause: () => void
}
export type UseGeolocationReturn = ReturnType<typeof useGeolocation>
export interface UseGeolocationOptions
extends Partial<PositionOptions>,
ConfigurableNavigator {
immediate?: boolean
}
/**
* Reactive Geolocation API.
*
* @see https://vueuse.org/useGeolocation
* @param options
*/
export declare function useGeolocation(options?: UseGeolocationOptions): {
isSupported: Ref<boolean>
coords: Ref<GeolocationCoordinates>
locatedAt: Ref<number | null>
error: Ref<{
readonly code: number
readonly message: string
readonly PERMISSION_DENIED: number
readonly POSITION_UNAVAILABLE: number
readonly TIMEOUT: number
} | null>
resume: () => void
pause: () => void
}
export type UseGeolocationReturn = ReturnType<typeof useGeolocation>