本文へ移動

§19-05Maps

現在地取得 + 追従

現在地を取得して地図の中心を合わせ、移動に追従する。

自分の周りに何があるかをすぐ探せる。店舗検索や経路案内のように、利用者の位置が検索の起点になる機能に使う。

実装のポイント

getCurrentPosition は単発、追従するなら watchPosition を使いアンマウント時に clearWatch する。許可拒否やタイムアウトのエラーを分けて案内する。

特徴
  • ブラウザ API
  • 非同期
デモで使っているもの
  • shadcn/ui
  • lucide-react
  • SVG
  • Pointer Events
  • Geolocation API