本文へ移動

§19-04Maps

ルート表示 (polyline)

地図上に出発地から目的地までの経路を線で描く。

出発地から目的地までの道筋を地図に重ね、距離感と経由地を直感的に伝える。配送追跡や移動記録など、道のり自体が情報になる場面で使う。

実装のポイント

経路は座標列を LineString として線レイヤーで描き、始点と終点を別マーカーで示す。全体が収まるよう座標の外接矩形で fitBounds し、余白を取る。

特徴
  • CSS のみ
  • モック
デモで使っているもの
  • lucide-react
  • SVG

このパターンが効く目的