Comment utiliser JS et Baidu Maps pour implémenter la fonction de navigation sur carte

Comment utiliser JS et Baidu Maps pour implémenter la fonction de navigation par itinéraire cartographique

Avec l'avancement continu de la technologie, la fonction de navigation par carte est devenue un élément essentiel de nos vies. Et comment implémenter la fonction de navigation par itinéraire cartographique dans la page Web ? Cet article explique comment utiliser JS et l'API Baidu Map pour implémenter cette fonction et fournit des exemples de code spécifiques.

Étape 1 : Obtenir la clé API Baidu Map

Tout d'abord, nous devons demander et obtenir la clé API Baidu Map. Demandez un compte développeur sur le site officiel de Baidu Map Open Platform et créez une application. Après une création réussie, vous obtiendrez une clé API unique, qui sera utilisée pour appeler l'interface API Baidu Maps.

Étape 2 : Introduire l'API Baidu Map et les fichiers JS associés

Introduire les fichiers JS de l'API Baidu Map et les fichiers JS associés dans la balise

du fichier HTML, par exemple :

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的API密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

Étape 3 : Créer un conteneur de carte

Créez un conteneur DIV dans la balise

Par exemple :

<div id="mapContainer"></div>

Étape 4 : Initialiser la carte et l'afficher

Utilisez la classe Map de l'API Baidu Map dans le fichier JS pour initialiser la carte et l'afficher dans le conteneur de carte sur la page. Par exemple :

var map = new BMap.Map("mapContainer"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建一个中心点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和缩放级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放功能

À ce stade, vous devriez pouvoir voir une zone affichant une carte dans votre navigateur.

Étape 5 : Ajouter des contrôles de navigation

Utilisez la classe NavigationControl de l'API Baidu Map pour ajouter des contrôles de navigation afin de prendre en charge les opérations de zoom et de panoramique de la carte. Par exemple :

var navigationControl = new BMap.NavigationControl();
map.addControl(navigationControl);

Étape 6 : Ajouter des étiquettes de points de début et de fin

Utilisez la classe Marker de l'API Baidu Map pour ajouter des étiquettes de points de début et de fin afin d'afficher les emplacements des points de début et de fin. Par exemple :

var startMarker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建起点标注
var endMarker = new BMap.Marker(new BMap.Point(116.434, 39.908)); // 创建终点标注
map.addOverlay(startMarker); // 添加起点标注到地图上
map.addOverlay(endMarker); // 添加终点标注到地图上

Étape 7 : Ajouter une planification d'itinéraire

Utilisez la classe DrivingRoute de l'API Baidu Map pour planifier l'itinéraire et l'afficher sur la carte. Par exemple :

var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
driving.search("起点", "终点");

Étape 8 : Ajouter des contrôles

Utilisez la classe GeolocationControl de l'API Baidu Map pour ajouter un contrôle de positionnement afin de localiser l'emplacement de l'utilisateur actuel. Par exemple :

var geolocationControl = new BMap.GeolocationControl();
map.addControl(geolocationControl);

Étape 9 : Améliorez la logique d'interaction

Ajoutez une logique d'interaction, comme cliquer sur les points de début et de fin pour marquer les fenêtres d'informations contextuelles, etc. Par exemple :

startMarker.addEventListener("click", function () {
  var infoWindow = new BMap.InfoWindow("这是起点");
  this.openInfoWindow(infoWindow);
});

endMarker.addEventListener("click", function () {
  var infoWindow = new BMap.InfoWindow("这是终点");
  this.openInfoWindow(infoWindow);
});

Après toutes les étapes ci-dessus, vous pouvez implémenter la fonction de navigation par itinéraire cartographique dans la page Web. Bien entendu, le code ci-dessus n’est qu’un exemple simple et vous pouvez l’étendre et l’optimiser en fonction des besoins réels. J'espère que cet article vous sera utile !

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!