Mapboxのルート
ユーザーの位置を取得するのに、Route サービスを使用して、ルートを作成できる。 出発地、目的地の情報をコールバックに渡して、応答を処理する。 onResponse関数内では、方向情報のレスポンスに基づいて地図上にルートを描画したり、時間と距離を表示したりすることができる。
Mapbox Directions
DirectionはMapboxナビゲーションの機能である。方向機能を簡単に実装できるようにサポートする。
Web
本ドキュメントはDirections APIのv5用である。 以前のバージョンについては、v4documentationをご参照ください。
Mapbox Directions APIは、目的地への行き方を示す。 Directions APIを使用すると、下記のことができる。
• 交通状況を考慮したルート検索を使用して、最適な運転、歩行、サイクリングのルートを計算する
• 案内を次々と作成する
• 運転、歩行、サイクリングのプロファイルに対して最大で25つの座標のルート、または運転交通プロファイルに対して最大で3つの座標のルートを作成する
本APIは4つのルートプロファイルをサポートする。
| プロファイル | 説明 |
|---|---|
| mapbox/driving-traffic | 本プロファイルは、自動ルーティングのためである。現在および過去の交通状況因数を分解し、減速を防ぐ。交通データページにリストされている地域を対象として交通情報が提供されている。 本プロファイルを使用するリクエストは、最大で3つの座標を受け入れる。 |
| mapbox/driving | 本プロファイルは、自動ルーティングのためである。高速道路などを参考することにより、最速のルートを示す。本プロファイルを使用するリクエストは、最大で25つの座標を受け入れる。 |
| mapbox/walking | 本プロファイルは、歩行およびハイキングルーティングのためである。 歩道と小路を参考することにより、最短のルートを示す。本プロファイルを使用するリクエストは、最大で25つの座標を受け入れる。 |
| mapbox/cycling | 本プロファイルは、自転車のルーティングのためである。高速道路を避け、自転車専用道路を優先することにより、自転車乗りのため短く安全な経路を示す。こ本プロファイルを使用するリクエストは、最大で25つの座標を受け入れる。 |
備考: 方向APIに関して、詳しくは下記のドキュメントをご参考くださいhttps://docs.mapbox.com/api/navigation/#directions
例
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset='utf-8' />
5. <title>Display driving directions</title>
6. <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
7. <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
8. <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
9. <style>
10. body { margin:0; padding:0; }
11. #map { position:absolute; top:0; bottom:0; width:100%; }
12. </style>
13. </head>
14. <body>
15.
16. <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js'></script>
17. <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css' type='text/css' />
18. <div id='map'></div>
19.
20. <script>
21. mapboxgl.accessToken = 'pk.YOUR_TOKEN';
22. var map = new mapboxgl.Map({
23. container: 'map',
24. style: 'mapbox://styles/mapbox/streets-v11',
25. center: [-79.4512, 43.6568],
26. zoom: 13
27. });
28.
29. map.addControl(new MapboxDirections({
30. accessToken: mapboxgl.accessToken
31. }), 'top-left');
32. </script>
33.
34. </body>
35. </html>
