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

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

Avec le développement d'Internet, la navigation sur carte est devenue un élément indispensable de nos vies. La mise en œuvre de la fonction de planification d'itinéraire sur carte dans la page Web fournira aux utilisateurs des services de navigation plus pratiques et plus précis. Cet article vous apprendra comment utiliser JS et l'API Baidu Map pour implémenter la fonction de planification d'itinéraire sur carte.

Étape 1 : demander une clé API Baidu Map
Avant de commencer, vous devez demander une clé API Baidu Map. Pour les étapes de candidature spécifiques, veuillez vous référer à la documentation officielle de Baidu Map Open Platform. Une fois votre candidature réussie, vous recevrez une clé qui sera utilisée pour accéder aux services Baidu Maps.

Étape 2 : Présentez l'API Baidu Map
Ensuite, introduisez la bibliothèque JS de Baidu Map dans votre fichier HTML. Vous pouvez introduire le fichier de bibliothèque officiellement fourni via le code suivant :

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_api_key"></script>

Notez que "your_api_key" dans le code est remplacé par la clé API Baidu Map que vous avez obtenue lors de la première étape.

Étape 3 : Créer la carte
Dans le fichier HTML, vous devez ajouter un conteneur pour afficher la carte. Vous pouvez utiliser l'élément <div> pour créer un conteneur : <code><div> 元素来创建一个容器：<pre class='brush:html;toolbar:false;'>&lt;div id=&quot;map&quot;&gt;&lt;/div&gt;</pre><p>然后，在JS文件中编写创建地图的代码，代码如下：</p><pre class='brush:javascript;toolbar:false;'>// 获取地图容器元素 var mapContainer = document.getElementById(&quot;map&quot;); // 创建地图实例 var map = new BMap.Map(mapContainer); // 设置地图中心点和缩放级别 var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 12);</pre><p>这段代码将创建一个地图实例，并将地图中心设置为北京市中心，缩放级别为12。</p> <p>步骤四：添加路线规划功能<br>接下来，我们将添加路线规划功能到地图中。百度地图提供了 <code>BMap.DrivingRoute 类来实现路线规划功能。代码如下：

// 创建DrivingRoute实例
var driving = new BMap.DrivingRoute(map);

// 设置起点和终点
var start = new BMap.Point(116.322, 39.983);
var end = new BMap.Point(116.396, 39.902);

// 设置路线规划参数
var opts = {
    policy: BMAP_DRIVING_POLICY_LEAST_TIME
};

// 规划路线
driving.search(start, end, opts);

// 添加路线到地图
driving.setSearchCompleteCallback(function(results){
    if (driving.getStatus() == BMAP_STATUS_SUCCESS){
        var plan = results.getPlan(0);
        map.addOverlay(new BMap.Polyline(plan.getRoute(0).getPath()));
    }
});

以上代码将创建一个 DrivingRoute 实例，并设置起点和终点。通过设置 BMAP_DRIVING_POLICY_LEAST_TIME 参数，可以选择规划路线的策略，默认是最快捷模式。然后使用 search 方法来规划路线。最后，添加一个回调函数来将路线添加到地图中。

步骤五：显示路线信息
如果你想在地图上显示路线的文字描述信息，可以使用 BMap.RouteLine 类。具体代码如下：

// 创建RouteLine实例
var routeLine = new BMap.RouteLine(results.getPlan(0).getRoute(0));

// 添加路线到地图
map.addOverlay(routeLine);

// 显示路线信息
routeLine.setTextIcon({
    policy: 'BMAP_DRIVING_POLICY_LEAST_TIME',
    enableDragging: true,
    lineStroke: 6,
    startMarkerStroke: 2,
    endMarkerStroke: 2
});

通过上述代码，我们可以将路线添加到地图中，并通过 setTextIconrrreee

Ensuite, écrivez le code pour créer la carte dans le fichier JS, le code est le suivant :

rrreee

Ce code va créez une instance de carte et définissez le centre de la carte sur le centre de Pékin et le niveau de zoom sur 12. 🎜🎜Étape 4 : Ajouter une fonction de planification d'itinéraire🎜Ensuite, nous ajouterons une fonction de planification d'itinéraire à la carte. Baidu Maps fournit la classe BMap.DrivingRoute pour implémenter les fonctions de planification d'itinéraire. Le code est le suivant : 🎜rrreee🎜Le code ci-dessus créera une instance DrivingRoute et définira les points de début et de fin. En définissant le paramètre BMAP_DRIVING_POLICY_LEAST_TIME, vous pouvez choisir la stratégie de planification d'itinéraire. La valeur par défaut est le mode le plus rapide. Utilisez ensuite la méthode search pour planifier l'itinéraire. Enfin, ajoutez une fonction de rappel pour ajouter l'itinéraire à la carte. 🎜🎜Étape 5 : Afficher les informations sur l'itinéraire🎜Si vous souhaitez afficher les informations de description textuelle de l'itinéraire sur la carte, vous pouvez utiliser la classe BMap.RouteLine. Le code spécifique est le suivant : 🎜rrreee🎜Avec le code ci-dessus, nous pouvons ajouter l'itinéraire à la carte et afficher les informations de description textuelle de l'itinéraire via la méthode setTextIcon. Lors de l'affichage des descriptions de texte, vous pouvez également personnaliser certains paramètres de style, tels que l'épaisseur des lignes, les styles de repères de début et de fin, etc. 🎜🎜Jusqu'à présent, nous avons terminé toutes les étapes pour implémenter la fonction de planification d'itinéraire sur carte à l'aide de JS et Baidu Maps. Vous pouvez développer et ajuster le code en fonction de vos propres besoins pour obtenir des fonctions de navigation cartographique plus personnalisées. J'espère que cet article vous sera utile et je vous souhaite une bonne planification d'itinéraire sur carte ! 🎜