useGeolocation

カテゴリ

センサー

エクスポートサイズ

526 B

最終変更

先週

リアクティブなGeolocation API。ユーザーが希望する場合、Webアプリケーションに自分の位置情報を提供できます。プライバシー上の理由から、ユーザーは位置情報を報告する許可を求められます。

デモ

ソース

{
  "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	`座標`	緯度や経度など、取得した位置情報に関する情報
locatedAt	`日付`	最後の地理位置情報呼び出しの時間
error	`string`	地理位置情報APIが失敗した場合のエラーメッセージ。
resume	`関数`	地理位置情報の更新を再開する制御関数
pause	`関数`	地理位置情報の更新を一時停止する制御関数

設定

useGeolocation関数は、オプションのパラメータとしてPositionOptionsオブジェクトを受け取ります。

コンポーネントの使い方

この関数は、@vueuse/componentsパッケージを通じてレンダリングレスコンポーネントバージョンも提供します。使い方の詳細はこちら。

vue

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

型宣言

typescript

export interface UseGeolocationOptions
  extends Partial<PositionOptions>,
    ConfigurableNavigator {
  immediate?: boolean
}
/**
 * Reactive Geolocation API.
 *
 * @see https://vueuse.dokyumento.jp/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>