JS と Baidu Maps を使用して地図ルート計画機能を実装する方法

JS と Baidu Maps を使用して地図ルート計画機能を実装する方法

インターネットの発展に伴い、地図ナビゲーションは私たちの生活に欠かせないものになりました。 Web ページに地図ルート計画機能を実装することで、ユーザーはより便利で正確なナビゲーション サービスを提供できます。この記事では、JS と Baidu Map API を使用して地図ルート計画機能を実装する方法を説明します。

ステップ 1: Baidu Map API キーを申請する
始める前に、Baidu Map API キーを申請する必要があります。具体的な申請手順については、Baidu Map Open Platform の公式ドキュメントを参照してください。申請が成功すると、Baidu Maps サービスにアクセスするために使用されるキーを取得します。

ステップ 2: Baidu Map API を導入する
次に、Baidu Map の JS ライブラリを HTML ファイルに導入します。公式に提供されているライブラリ ファイルは、次のコードを通じて導入できます。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_api_key"></script>

コード内の "your_api_key" は、最初の手順で取得した Baidu Map API キーに置き換えられることに注意してください。

ステップ 3: マップを作成する
HTML ファイルに、マップを表示するためのコンテナを追加する必要があります。 <div> 要素を使用してコンテナを作成できます: <pre class='brush:php;toolbar:false;'>&lt;div id=&quot;map&quot;&gt;&lt;/div&gt;</pre><p>次に、JS ファイルにマップを作成するコードを記述します。コードは次のとおりです: </p> <pre class='brush:php;toolbar:false;'>// 获取地图容器元素 var mapContainer = document.getElementById(&quot;map&quot;); // 创建地图实例 var map = new BMap.Map(mapContainer); // 设置地图中心点和缩放级别 var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 12);</pre><p>このコード マップ インスタンスが作成され、マップの中心はズーム レベル 12 で北京の中心に設定されます。 </p> <p>ステップ 4: ルート計画機能の追加<br>次に、マップにルート計画機能を追加します。 Baidu Maps は、ルート計画機能を実装するための <code>BMap.DrivingRoute クラスを提供します。コードは次のとおりです。

// 创建DrivingRoute实例
var driving = new BMap.DrivingRoute(map);

// 设置起点和终点
var start = new BMap.Point(116.322, 39.983);
var end = new BMap.Point(116.396, 39.902);

// 设置路线规划参数
var opts = {
    policy: BMAP_DRIVING_POLICY_LEAST_TIME
};

// 规划路线
driving.search(start, end, opts);

// 添加路线到地图
driving.setSearchCompleteCallback(function(results){
    if (driving.getStatus() == BMAP_STATUS_SUCCESS){
        var plan = results.getPlan(0);
        map.addOverlay(new BMap.Polyline(plan.getRoute(0).getPath()));
    }
});

上記のコードは、DrivingRoute インスタンスを作成し、開始点と終了点を設定します。 BMAP_DRIVING_POLICY_LEAST_TIME パラメータを設定すると、ルート計画戦略を選択できます。デフォルトは最速モードです。次に、search メソッドを使用してルートを計画します。最後に、マップにルートを追加するコールバック関数を追加します。

ステップ 5: ルート情報の表示
地図上にルートのテキスト説明情報を表示したい場合は、BMap.RouteLine クラスを使用できます。具体的なコードは次のとおりです。

// 创建RouteLine实例
var routeLine = new BMap.RouteLine(results.getPlan(0).getRoute(0));

// 添加路线到地图
map.addOverlay(routeLine);

// 显示路线信息
routeLine.setTextIcon({
    policy: 'BMAP_DRIVING_POLICY_LEAST_TIME',
    enableDragging: true,
    lineStroke: 6,
    startMarkerStroke: 2,
    endMarkerStroke: 2
});

上記のコードにより、マップにルートを追加し、setTextIcon メソッドを通じてルートのテキスト説明情報を表示できます。テキストの説明を表示する場合、線の太さ、開始マークと終了マークのスタイルなど、一部のスタイル パラメータをカスタマイズすることもできます。

これまでに、JS と Baidu Maps を使用した地図ルート計画機能を実装するすべての手順が完了しました。独自のニーズに応じてコードを拡張および調整して、よりパーソナライズされたマップ ナビゲーション機能を実現できます。この記事があなたのお役に立てば幸いです。また、地図のルート計画がうまくいくことを願っています。