So verwenden Sie JS und Baidu Maps, um die Routenplanungsfunktion für Kartenfahrten zu implementieren

So verwenden Sie JS und Baidu Maps, um die Routenplanungsfunktion für Kartenfahrten zu implementieren

Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Routenplanung für Kartenfahrten zu einer der wesentlichen Funktionen in unserem täglichen Leben geworden. Um die Routenplanung für Kartenfahrten zu implementieren, können wir JS und Baidu Maps verwenden, um diese Funktion zu implementieren. In diesem Artikel wird detailliert beschrieben, wie Sie JS und Baidu Maps verwenden, um die Routenplanungsfunktion für Kartenfahrten zu implementieren, und es werden spezifische Codebeispiele angegeben.

1. Vorbereitung
Bevor wir mit dem Schreiben von Code beginnen, müssen wir einige notwendige Arbeiten vorbereiten:

1. Baidu-Kartenschlüssel: Beantragen Sie einen Schlüssel auf der offenen Baidu-Kartenplattform und notieren Sie ihn, der später verwendet wird.

2. Baidu Map API einführen: Führen Sie die JS-Datei von Baidu Map in die HTML-Datei ein, zum Beispiel:

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

   Nach dem Login kopieren

   Dabei muss YOUR-KEY durch den Schlüssel ersetzt werden, den Sie beantragt haben.

2. Erstellen Sie eine Karte
Zuerst müssen wir einen Kartencontainer erstellen und ihn auf der Seite anzeigen. Der HTML-Code lautet wie folgt:

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

Fügen Sie dann den folgenden Code in JS hinzu, um die Karte zu erstellen:

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

Wobei „Karte“ die ID des Kartencontainers ist. Hier erstellen wir eine Standardkarte und legen den Mittelpunkt fest Zoom der Kartenebene.

3. Fügen Sie die Routenplanungsfunktion hinzu.
Als nächstes müssen wir die Routenplanungsfunktion hinzufügen. Das Folgende ist ein Codebeispiel:

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

Im obigen Code erstellen wir eine DrivingRoute-Instanz und richten den Kartencontainer und die Rückruffunktion ein. Dann verwenden wir die Suchmethode, um die Fahrtroute zu planen. Wenn die Routenplanung abgeschlossen ist, wird die Rückruffunktion ausgelöst. In der Rückruffunktion können wir die spezifischen Informationen zur Fahrtroute abrufen und die Fahrtroute auf der Karte anzeigen.

4. Vollständiger Beispielcode
Das Folgende ist ein vollständiger Beispielcode, den Sie in eine HTML-Datei kopieren und ausführen können:

  
  



  


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

Im obigen Code müssen Sie „YOUR-KEY“ durch Ihre eigene Baidu-Karte ersetzen Schlüssel.

Zusammenfassung
Mit der oben genannten Methode können wir problemlos JS- und Baidu-Karten verwenden, um die Routenplanungsfunktion für Kartenfahrten zu implementieren. Mit nur wenigen Codezeilen können Sie Wegbeschreibungen auf einer Karte anzeigen und Informationen zur Wegbeschreibung erhalten. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS und Baidu Maps, um die Routenplanungsfunktion für Kartenfahrten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!