Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi perancangan laluan memandu peta

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi perancangan laluan memandu peta

Dengan kemajuan teknologi yang berterusan, perancangan laluan memandu peta telah menjadi salah satu fungsi penting dalam kehidupan seharian kita. Untuk melaksanakan perancangan laluan memandu peta, kami boleh menggunakan Peta JS dan Baidu untuk melaksanakan fungsi ini. Artikel ini akan memperkenalkan secara terperinci cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi perancangan laluan memandu peta dan memberikan contoh kod khusus.

1. Persediaan
Sebelum kita mula menulis kod, kita perlu menyediakan beberapa kerja yang diperlukan:

1. Kunci peta Baidu: Mohon kunci pada platform terbuka peta Baidu dan tuliskannya, yang akan digunakan kemudian.

2. Perkenalkan API Peta Baidu: Perkenalkan fail JS Peta Baidu dalam fail HTML, contohnya:

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

   Antaranya, KUNCI ANDA perlu diganti dengan kunci yang anda mohon.

2 Buat peta
Mula-mula, kita perlu mencipta bekas peta dan memaparkannya pada halaman. Kod HTML adalah seperti berikut:

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

Kemudian, tambah kod berikut dalam JS untuk mencipta peta:

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

Di mana "peta" ialah ID bekas peta Di sini kita mencipta peta lalai dan menetapkan titik tengah dan zum tahap peta.

3. Tambah fungsi perancangan laluan memandu
Seterusnya, kita perlu menambah fungsi perancangan laluan memandu. Berikut ialah contoh kod:

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

Dalam kod di atas, kami mencipta contoh DrivingRoute dan menyediakan bekas peta dan fungsi panggil balik. Kemudian, kami menggunakan kaedah carian untuk merancang laluan pemanduan. Apabila perancangan laluan pemanduan selesai, fungsi panggil balik akan dicetuskan Kita boleh mendapatkan maklumat khusus laluan pemanduan dalam fungsi panggil balik dan memaparkan laluan pemanduan pada peta.

4. Lengkapkan kod contoh
Berikut ialah contoh kod lengkap, anda boleh menyalinnya ke fail HTML dan menjalankannya:

  
  


  


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

Dalam kod di atas, anda perlu menggantikan "YOUR-KEY" dengan Peta Baidu anda sendiri kunci.

Ringkasan
Melalui kaedah di atas, kita boleh menggunakan Peta JS dan Baidu dengan mudah untuk melaksanakan fungsi perancangan laluan memandu peta. Dengan hanya beberapa baris kod, anda boleh memaparkan arah pemanduan pada peta dan mendapatkan maklumat tentang arah pemanduan. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi perancangan laluan memandu peta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!