Comment utiliser JS et Amap pour implémenter la fonction de navigation de localisation

Comment utiliser JS et Amap pour implémenter la fonction de navigation de localisation

Avec la popularité des smartphones, la navigation cartographique est devenue l'une des fonctions indispensables dans la vie quotidienne. Dans les pages Web ou les applications mobiles, via JS et l'API Amap, nous pouvons facilement implémenter des fonctions de navigation de localisation. Ce qui suit présentera en détail comment utiliser JS et l'API Amap pour implémenter la fonction de navigation de localisation et fournira des exemples de code.

1. Préparation
Avant de commencer, nous devons enregistrer un compte développeur Amap et créer une application pour obtenir la clé API. La clé API est le seul identifiant permettant d'accéder au service de carte Amap et peut être transmise à l'API en tant que paramètre lors de l'utilisation de l'API de carte.

2. Présentez l'API Amap Map
Dans le fichier HTML, nous devons d'abord introduire le fichier JS de l'API Amap Map. Vous pouvez télécharger la dernière version du fichier API depuis le site Web du développeur Amap, ou vous pouvez utiliser directement le lien CDN fourni par Amap.

<script src="https://webapi.amap.com/maps?v=1.4.15&key=your_api_key"></script>

Parmi eux, your_api_key doit être remplacé par votre propre clé API.

3. Créer un conteneur de carte
Dans le fichier HTML, nous devons créer un conteneur pour afficher la carte. Peut être un élément div ou un autre élément approprié.

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

4. Initialiser l'objet cartographique
Dans le fichier JS, nous devons initialiser l'objet cartographique et définir le point central et le niveau de zoom de la carte.

var map = new AMap.Map('mapContainer', {
  center: [116.397428, 39.90923], // 默认中心点坐标（北京）
  zoom: 13 // 默认缩放级别
});

où [116.397428, 39.90923] sont les coordonnées de latitude et de longitude du point central de la carte, qui peuvent être ajustées selon les besoins.

5. Ajouter des points de marquage
Lors de la navigation par localisation, nous avons généralement deux points de marquage : le point de départ et le point final. Nous pouvons utiliser l'objet Marker d'Amap pour ajouter des points marqueurs.

var startMarker = new AMap.Marker({
  position: [116.397428, 39.90923], // 起点坐标
  map: map, // 传入地图对象
  title: '起点' // 鼠标悬停时显示的标题
});

var endMarker = new AMap.Marker({
  position: [116.397428, 39.948691], // 终点坐标
  map: map, // 传入地图对象
  title: '终点' // 鼠标悬停时显示的标题
});

Où [116.397428, 39.90923] est les coordonnées du point de départ, [116.397428, 39.948691] est les coordonnées du point final, qui peuvent être ajustées en fonction des besoins réels.

6. Dessiner un itinéraire de navigation
En utilisant l'objet Conduite d'Amap, nous pouvons dessiner un itinéraire de navigation basé sur les coordonnées du point de départ et d'arrivée.

var driving = new AMap.Driving({
  map: map, // 传入地图对象
  panel: 'routePanel' // 显示导航结果的容器ID
});

driving.search(new AMap.LngLat(116.397428, 39.90923), new AMap.LngLat(116.397428, 39.948691), function (status, result) {
  if (status === 'complete') {
    // 导航路线绘制成功
  } else {
    // 导航路线绘制失败
  }
});

où 'routePanel' est l'ID de l'élément conteneur qui affiche les résultats de navigation, qui peut être défini en fonction de vos besoins.

7. Exemple de code complet

  
  
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_api_key"></script>


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


  <script>
    var map = new AMap.Map('mapContainer', {
      center: [116.397428, 39.90923],
      zoom: 13
    });

    var startMarker = new AMap.Marker({
      position: [116.397428, 39.90923],
      map: map,
      title: '起点'
    });

    var endMarker = new AMap.Marker({
      position: [116.397428, 39.948691],
      map: map,
      title: '终点'
    });

    var driving = new AMap.Driving({
      map: map,
      panel: 'routePanel'
    });

    driving.search(new AMap.LngLat(116.397428, 39.90923), new AMap.LngLat(116.397428, 39.948691), function (status, result) {
      if (status === 'complete') {
        // 导航路线绘制成功
      } else {
        // 导航路线绘制失败
      }
    });
  </script>

Ce qui précède explique comment implémenter la fonction de navigation de localisation à l'aide de JS et de l'API Amap. Grâce aux appels API correspondants, nous pouvons afficher des cartes, ajouter des marqueurs et dessiner des itinéraires de navigation sur des pages Web ou des applications mobiles. En fonction des besoins réels, nous pouvons modifier et étendre le code en conséquence pour répondre aux exigences fonctionnelles spécifiques de navigation de localisation.

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!