本文へ移動

§19-11Maps

経路シェア link

経路の出発地と目的地を URL で共有する。

調べた経路をそのまま相手に渡し、開いた側が同じ地図を見られる。待ち合わせや旅程の共有で使う。

実装のポイント

出発地と目的地の座標を URL の search params に入れ、開いた側で復元する。共有は navigator.share を優先し、非対応なら clipboard.writeText にフォールバックする。

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