SCALE — Build Lab
機能パターン · REACT COMPONENT

GPS位置情報取得

CATEGORY機能パターン TYPEReact Component EFFORT30〜90分 DIFFICULTY
PRIMARY CODE
ts
export function getCurrentPosition(): Promise<{ lat: number; lng: number; accuracy: number }> {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) return reject(new Error('GPS非対応'));
    navigator.geolocation.getCurrentPosition(
      pos => resolve({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude,
        accuracy: pos.coords.accuracy,
      }),
      err => reject(err),
      { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
    );
  });
}

// リアルタイム追跡
export function watchPosition(onUpdate: (pos: GeolocationPosition) => void) {
  return navigator.geolocation.watchPosition(onUpdate, console.error, {
    enableHighAccuracy: true,
  });
}
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • 任意のダッシュボードに組み込み

GPS位置情報取得

:LiTarget: 用途

ブラウザ Geolocation API で現在地取得。出退勤打刻・現場記録に。

:LiSparkle: 特徴

  • 現在地取得
  • 精度判定
  • 権限プロンプト
  • リアルタイム追跡

:LiCode: コード(コピペ用)

export function getCurrentPosition(): Promise<{ lat: number; lng: number; accuracy: number }> {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) return reject(new Error('GPS非対応'));
    navigator.geolocation.getCurrentPosition(
      pos => resolve({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude,
        accuracy: pos.coords.accuracy,
      }),
      err => reject(err),
      { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
    );
  });
}

// リアルタイム追跡
export function watchPosition(onUpdate: (pos: GeolocationPosition) => void) {
  return navigator.geolocation.watchPosition(onUpdate, console.error, {
    enableHighAccuracy: true,
  });
}

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加