useGeolocation

Demo

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

使用方法

import { useGeolocation } from '@vueuse/core'

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

状态	类型	描述
coords	`Coordinates`	获取的位置信息，如纬度和经度
locatedAt	`Date`	最后一次地理定位的时间
error	`string`	如果地理定位 API 失败，则显示错误消息。
resume	`function`	控制函数，用于恢复更新地理定位。
pause	`function`	控制函数，用于暂停更新地理定位。

配置

useGeolocation 函数可以接受 PositionOptions 对象作为可选参数。

组件使用

vue

<template>
  <UseGeolocation v-slot="{ coords: { latitude, longitude } }">
    纬度：{{ latitude }} 经度：{{ longitude }}
  </UseGeolocation>
</template>

类型声明

typescript

export interface UseGeolocationOptions
  extends Partial<PositionOptions>,
    ConfigurableNavigator {
  immediate?: boolean
}
/**
 * 响应式 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>