useGeolocation

反应式 地理定位 API。如果用户愿意，它允许用户向网络应用提供他们的位置。出于隐私原因，需要获得用户报告位置信息的许可。

¥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.

示例

source

{
  "coords": {
    "accuracy": 0,
    "latitude": null,
    "longitude": null,
    "altitude": null,
    "altitudeAccuracy": null,
    "heading": null,
    "speed": null
  },
  "locatedAt": null,
  "error": null
}

用法

¥Usage

import { useGeolocation } from '@vueuse/core'

const { coords, locatedAt, error, resume, pause } = useGeolocation()

状态	类型	描述
coords	Coordinates	有关检索到的位置的信息，例如纬度和经度
locatedAt	Date	最后一次地理定位调用的时间
error	string	如果地理定位 API 失败，则会出现错误消息。
resume	function	恢复更新地理位置的控制函数
pause	function	暂停更新地理位置的控制函数

配置

¥Config

useGeolocation 函数将 PositionOptions 对象作为可选参数。

¥useGeolocation function takes PositionOptions object as an optional parameter.

组件用法

¥Component Usage

<template>
  <UseGeolocation v-slot="{ coords: { latitude, longitude } }">
    Latitude: {{ latitude }}
    Longitude: {{ longitude }}
  </UseGeolocation>
</template>

类型声明

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: ComputedRef<boolean>
  coords: Ref<
    Omit<GeolocationCoordinates, "toJSON">,
    Omit<GeolocationCoordinates, "toJSON">
  >
  locatedAt: Ref<number | null, number | null>
  error: ShallowRef<
    GeolocationPositionError | null,
    GeolocationPositionError | null
  >
  resume: () => void
  pause: () => void
}
export type UseGeolocationReturn = ReturnType<typeof useGeolocation>

源代码

源代码 • 示例 • 文档

变更日志

No recent changes