JSと百度地図を使って地図走行ルート計画機能を実装する方法

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

技術の継続的な進歩により、地図によるドライブ ルート計画は私たちの日常生活に不可欠なものになりました。機能のひとつ。地図走行ルート計画を実装するには、JS と Baidu Maps を使用してこの機能を実装できます。この記事では、JS と Baidu Maps を使用して地図ドライブルート計画機能を実装する方法と、具体的なコード例を詳しく紹介します。

1. 準備作業
コードを書き始める前に、いくつかの必要な作業を準備する必要があります:

1. Baidu マップ キー: Baidu マップ オープン プラットフォームでキーを申請します。 、後で使用できるように書き留めておきます。

2. Baidu Map API の導入: Baidu Map の JS ファイルを HTML ファイルに導入します。例:

   <script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR-KEY"></script>

   このうち、YOUR-KEY は自分のキーに置き換える必要があります。に適用。

2. マップを作成する
まず、マップ コンテナーを作成し、ページに表示する必要があります。 HTML コードは次のとおりです。

<div id="map"></div>

次に、JS に次のコードを追加してマップを作成します。

var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

このうち、「map」はマップ コンテナの ID です。デフォルトのマップを作成し、マップの中心点とズーム レベルを設定します。

3. 走行ルート計画機能の追加
次に、走行ルート計画機能を追加します。以下はコード例です:

// 创建DrivingRoute实例，使用自动获取用户位置的定位
var driving = new BMap.DrivingRoute(map, {onSearchComplete: drivingComplete});
driving.setLocation("北京");

// 规划行车路线
driving.search("北京市海淀区上地十街10号", "北京市朝阳区东直门外大街1号");

// 定义行车路线规划完成时的回调函数
function drivingComplete(results) {
  if (driving.getStatus() === BMAP_STATUS_SUCCESS) {
    var plan = results.getPlan(0);
    var route = plan.getRoute(0);
    var distance = route.getDistance(false) / 1000; // 单位为千米
    var duration = route.getDuration(false) / 60; // 单位为分钟
    var steps = route.getSteps();
    var polyline = new BMap.Polyline(route.getPath());
    
    // 在地图上显示行车路线
    map.addOverlay(polyline);
    
    // 输出行车路线的距离和预计时间
    console.log("距离：" + distance + "千米");
    console.log("预计时间：" + duration + "分钟");

    // 输出行车路线的每个步骤
    for (var i = 0; i < steps.length; i++) {
      console.log(steps[i].getDescription());
    }
  }
}

上記のコードでは、DrivingRoute インスタンスを作成し、マップ コンテナーとコールバック関数を設定しました。次に、検索メソッドを使用して走行ルートを計画します。走行ルートの計画が完了するとコールバック関数が起動され、コールバック関数で走行ルートの具体的な情報を取得し、地図上に走行ルートを表示することができます。

4. 完全なサンプル コード
以下は完全なサンプル コードです。これを HTML ファイルにコピーして実行できます:

  
  


  


  <script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR-KEY"></script>
  <script>
    var map = new BMap.Map("map");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);

    var driving = new BMap.DrivingRoute(map, {onSearchComplete: drivingComplete});
    driving.setLocation("北京");
    driving.search("北京市海淀区上地十街10号", "北京市朝阳区东直门外大街1号");

    function drivingComplete(results) {
      if (driving.getStatus() === BMAP_STATUS_SUCCESS) {
        var plan = results.getPlan(0);
        var route = plan.getRoute(0);
        var distance = route.getDistance(false) / 1000; // 单位为千米
        var duration = route.getDuration(false) / 60; // 单位为分钟
        var steps = route.getSteps();
        var polyline = new BMap.Polyline(route.getPath());
        map.addOverlay(polyline);

        console.log("距离：" + distance + "千米");
        console.log("预计时间：" + duration + "分钟");

        for (var i = 0; i < steps.length; i++) {
          console.log(steps[i].getDescription());
        }
      }
    }
  </script>

上記のコードでは、「 を置き換える必要があります」 YOUR-KEY」に独自の Baidu マップ キーを使用します。

概要
上記の方法により、JS と Baidu Maps を使用して地図走行ルート計画機能を簡単に実装できます。わずか数行のコードで、地図上に運転経路を表示し、運転経路に関する情報を取得できます。この記事がお役に立てば幸いです!

以上がJSと百度地図を使って地図走行ルート計画機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。