如何使用JS和百度地圖實現地圖行車路線規劃功能-js教程-PHP中文網

如何使用JS和百度地圖實現地圖行車路線規劃功能

WBOY

發布： 2023-11-21 11:06:11

原創

1506 人瀏覽過

如何使用JS和百度地圖實現地圖行車路線規劃功能

#隨著科技的不斷進步，地圖行車路線規劃已經成為我們日常生活中必不可少的功能之一。而為了實現地圖行車路線規劃，我們能夠利用JS和百度地圖來實現這個功能。本文將詳細介紹如何使用JS和百度地圖實現地圖行車路線規劃功能，並給出具體的程式碼範例。

一、準備工作
在開始編寫程式碼之前，我們需要準備一些必要的工作：

百度地圖金鑰：在百度地圖開放平台申請一個金鑰，並記下來，後面會用到。
引入百度地圖API：在HTML文件中引入百度地圖的JS文件，例如：
```
<script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR-KEY"></script>
```
登入後複製
其中，YOUR-KEY需要替換為你申請到的密鑰。

二、建立地圖
首先，我們需要建立一個地圖容器，並顯示在頁面中。 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，這裡我們建立了一個預設的地圖，並設定地圖的中心點和縮放等級。

三、新增行車路線規劃功能
接下來，我們需要新增行車路線規劃的功能。以下是程式碼範例：

// 创建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實例，並設定了地圖容器和回呼函數。然後，我們使用search方法來規劃行車路線。當行車路線規劃完成後，會觸發回調函數，我們可以在回調函數中獲取行車路線的具體信息，並在地圖上顯示行車路線。

四、完整範例程式碼
下面是一個完整的範例程式碼，你可以將它複製到一個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"替換為你自己的百度地圖密鑰。

總結
透過上述方法，我們可以輕鬆地使用JS和百度地圖來實現地圖行車路線規劃功能。只需幾行程式碼，便可以實現在地圖上顯示行車路線，並獲取行車路線的相關資訊。希望這篇文章對你有幫助！

以上是如何使用JS和百度地圖實現地圖行車路線規劃功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！