useGeolocation

一个 React 钩子(Hook),提供了一种简单的方法来获取用户的 地理位置

演示

源码
Is supported:
false
Is locating:
false
Located at:
09:56:04

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

API

const geo = useGeolocation(options)

选项 Options

/**
 * DOM 内置的地理位置 API 选项
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition#options
 */
interface PositionOptions {
  enableHighAccuracy?: boolean  // 是否启用高精度
  maximumAge?: number  // 位置信息的最大缓存时间
  timeout?: number  // 获取位置信息的超时时间
}

export type UseGeolocationOptions = PositionOptions & {
  /**
   * 是否立即开始观察地理位置。
   *
   * @defaultValue true
   */
  immediate?: boolean
}

返回值

export type UseGeolocationReturns = Pausable & {
  /**
   * 是否支持地理位置 API。
   */
  isSupported: boolean
  /**
   * 当前的纬度。
   */
  latitude: number | null
  /**
   * 当前的经度。
   */
  longitude: number | null
  /**
   * 当前地理位置状态。
   */
  isLocating: boolean
  /**
   * 地理位置最后更新的时间戳。
   */
  locatedAt: number | null
  /**
   * 若有的话,错误对象。
   */
  error: GeolocationPositionError | null
  /**
   * 当前地理位置坐标。
   */
  coords: Omit<GeolocationPosition['coords'], 'latitude' | 'longitude'> & {
    latitude: number | null
    longitude: number | null
  }
}