Comment utiliser JS et Baidu Maps pour implémenter la fonction de planification d'itinéraire de conduite sur carte

Comment utiliser JS et Baidu Maps pour mettre en œuvre la fonction de planification d'itinéraire sur carte

Avec les progrès continus de la technologie, la planification d'itinéraire sur carte est devenue l'une des fonctions essentielles de notre vie quotidienne. Afin de mettre en œuvre la planification d'itinéraires de conduite sur carte, nous pouvons utiliser JS et Baidu Maps pour implémenter cette fonction. Cet article présentera en détail comment utiliser JS et Baidu Maps pour implémenter la fonction de planification d'itinéraire de conduite sur carte et donnera des exemples de code spécifiques.

1. Préparation
Avant de commencer à écrire du code, nous devons préparer certains travaux nécessaires :

1. Clé de la carte Baidu : demandez une clé sur la plate-forme ouverte de la carte Baidu et notez-la, qui sera utilisée plus tard.

2. Introduisez l'API Baidu Map : Introduisez le fichier JS de Baidu Map dans le fichier HTML, par exemple :

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

   Parmi eux, VOTRE-CLÉ doit être remplacée par la clé que vous avez demandée.

2. Créer une carte
Tout d'abord, nous devons créer un conteneur de carte et l'afficher sur la page. Le code HTML est le suivant :

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

Ensuite, ajoutez le code suivant dans JS pour créer la carte :

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

Où "map" est l'ID du conteneur de carte Ici, nous créons une carte par défaut et définissons le point central et. zoom du niveau de la carte.

3. Ajoutez la fonction de planification d'itinéraire de conduite
Ensuite, nous devons ajouter la fonction de planification d'itinéraire de conduite. Voici un exemple de code :

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

Dans le code ci-dessus, nous créons une instance DrivingRoute et configurons le conteneur de carte et la fonction de rappel. Ensuite, nous utilisons la méthode de recherche pour planifier l’itinéraire. Lorsque la planification de l'itinéraire de conduite est terminée, la fonction de rappel sera déclenchée. Nous pouvons obtenir les informations spécifiques de l'itinéraire de conduite dans la fonction de rappel et afficher l'itinéraire de conduite sur la carte.

4. Exemple de code complet
Ce qui suit est un exemple de code complet, vous pouvez le copier dans un fichier HTML et l'exécuter :

  
  


  


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

Dans le code ci-dessus, vous devez remplacer "VOTRE-CLÉ" par votre propre carte Baidu. clé.

Résumé
Grâce à la méthode ci-dessus, nous pouvons facilement utiliser JS et Baidu Maps pour implémenter la fonction de planification d'itinéraire de conduite sur carte. Avec seulement quelques lignes de code, vous pouvez afficher des itinéraires routiers sur une carte et obtenir des informations sur les itinéraires routiers. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!