Comment utiliser JS et Amap pour implémenter la fonction de planification de chemin

Comment utiliser JS et Amap pour implémenter la fonction de planification de chemin

Introduction :

Dans la vie moderne, la fonction de planification de chemin est un outil que nous devons souvent utiliser. Qu'il s'agisse de planifier des itinéraires de voyage ou des itinéraires de transport, la planification des itinéraires est très importante. Dans le développement Web, nous pouvons utiliser JS et l'API Amap pour implémenter des fonctions de planification d'itinéraire et fournir aux utilisateurs des services de planification d'itinéraire pratiques. Cet article explique comment utiliser JS et l'API Amap pour la planification de chemin, y compris des exemples de code spécifiques.

1. Préparation

Avant de commencer à écrire du code, nous devons préparer certains travaux nécessaires. Tout d’abord, nous devons introduire l’API Amap dans notre projet. Vous pouvez introduire l'API Amap via le code suivant :

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>

Parmi eux, YOUR_KEY doit être remplacé par votre propre clé API Amap. Si vous ne possédez pas encore votre propre clé, vous pouvez en demander une sur la plateforme ouverte Amap. Une fois l'application réussie, remplacez la clé par YOUR_KEY dans le code ci-dessus.

2. Dessinez la carte

Après avoir présenté l'API Amap, nous pouvons commencer à dessiner la carte. Tout d’abord, vous devez créer un conteneur de cartes dans la page. Un conteneur de carte peut être créé via le code suivant :

<div id="map" style="width: 100%; height: 400px;"></div>

Ensuite, nous pouvons utiliser le code JS pour créer un objet cartographique et afficher la carte dans le conteneur de carte :

var map = new AMap.Map('map');

De cette façon, une simple carte est dessinée. Ensuite, nous présenterons comment effectuer la planification de chemin.

3. Planification du sentier

1. Planification du sentier pédestre

Tout d'abord, présentons comment planifier le sentier pédestre. La planification d'un sentier pédestre est le type de planification de sentier le plus simple. Il vous suffit de spécifier le point de départ et le point d'arrivée. Voici un exemple de code pour implémenter la planification de sentiers pédestres :

var startLngLat = [116.397428, 39.90923];  // 起点经纬度
var endLngLat = [116.410743, 39.916395];   // 终点经纬度

AMap.plugin('AMap.Walking', function () {
  var walking = new AMap.Walking({
    map: map
  });

  walking.search(startLngLat, endLngLat, function (status, result) {
    if (status === 'complete') {
      // 路径规划成功，可以在地图上展示路径
    } else {
      // 路径规划失败，可以提示用户重新规划路径
    }
  });
});

Dans le code, nous définissons d'abord la longitude et la latitude du point de départ et du point final, puis utilisons l'objet AMap.Walking pour la planification de chemin. Une fois la planification du chemin réussie, le chemin peut être affiché sur la carte ; si la planification du chemin échoue, l'utilisateur peut être invité à replanifier le chemin.

2. Planification d'itinéraire de conduite

Ensuite, nous présentons comment planifier un itinéraire de conduite. La planification d'itinéraires routiers nécessite de spécifier le point de départ et le point d'arrivée, ainsi que les points de passage. Voici un exemple de code pour implémenter la planification d'itinéraires :

var startPoint = '北京东站';  // 起点名称
var endPoint = '北京西站';     // 终点名称
var wayPoints = ['颐和园', '天安门'];  // 途经点名称

AMap.plugin('AMap.Driving', function () {
  var driving = new AMap.Driving({
    policy: AMap.DrivingPolicy.LEAST_FEE,  // 路径规划策略
    map: map
  });

  driving.search(startPoint, endPoint, {waypoints: wayPoints}, function (status, result) {
    if (status === 'complete') {
      // 路径规划成功，可以在地图上展示路径
    } else {
      // 路径规划失败，可以提示用户重新规划路径
    }
  });
});

Dans le code, nous définissons d'abord les noms des points de départ et d'arrivée, ainsi que les noms des points de passage. Utilisez ensuite l'objet AMap.Driving pour la planification du chemin. Une fois la planification du chemin réussie, le chemin peut être affiché sur la carte ; si la planification du chemin échoue, l'utilisateur peut être invité à replanifier le chemin.

Résumé :

Il n'est pas compliqué d'implémenter la fonction de planification d'itinéraire à l'aide de JS et de l'API Amap. Il vous suffit de préparer le conteneur de cartes, d'introduire l'API Amap, puis d'utiliser l'objet API correspondant pour la planification du chemin. J'espère que cet article pourra vous aider à réaliser votre propre fonction de planification de chemin.

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!