How to use JS and Baidu Maps to implement map driving route planning function

How to use JS and Baidu Maps to implement map driving route planning function

With the continuous advancement of technology, map driving route planning has become essential in our daily lives One of the functions. In order to implement map driving route planning, we can use JS and Baidu Maps to implement this function. This article will introduce in detail how to use JS and Baidu Maps to implement the map driving route planning function, and give specific code examples.

1. Preparation work
Before we start writing code, we need to prepare some necessary work:

1. Baidu map key: apply for a key on the Baidu map open platform , and write it down for later use.

2. Introduce Baidu Map API: Introduce the JS file of Baidu Map in the HTML file, for example:

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

   Copy after login

   Among them, YOUR-KEY needs to be replaced with the key you applied for.

2. Create a map
First, we need to create a map container and display it on the page. The HTML code is as follows:

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

Then, add the following code in JS to create a map:

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

Among them, "map" is the ID of the map container, here we create a default map, And set the center point and zoom level of the map.

3. Add the driving route planning function
Next, we need to add the driving route planning function. The following is a code example:

// 创建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());
    }
  }
}

In the above code, we created a DrivingRoute instance and set up the map container and callback function. Then, we use the search method to plan the driving route. When the driving route planning is completed, the callback function will be triggered. We can obtain the specific information of the driving route in the callback function and display the driving route on the map.

4. Complete sample code
The following is a complete sample code. You can copy it to an HTML file and run it:

  
  



  


  <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>

In the above code, you need to " Replace YOUR-KEY" with your own Baidu map key.

Summary
Through the above method, we can easily use JS and Baidu Maps to implement the map driving route planning function. With just a few lines of code, you can display driving directions on a map and get information about driving directions. Hope this article helps you!

The above is the detailed content of How to use JS and Baidu Maps to implement map driving route planning function. For more information, please follow other related articles on the PHP Chinese website!