Comment utiliser JS et Amap pour implémenter la fonction de recommandation d'attractions populaires dans des emplacements

Comment utiliser JS et Amap pour implémenter la fonction de recommandation d'attractions populaires, vous avez besoin d'exemples de code spécifiques

1 Introduction
Avec le développement du tourisme, de plus en plus de personnes aiment voyager de manière indépendante et espèrent trouver des lieux locaux populaires. attractions pour une meilleure planification de voyage. Cet article utilisera JavaScript et l'API Amap pour implémenter une fonction de recommandation d'attractions populaire.

2. Processus de mise en œuvre

1. Enregistrer un compte développeur
   Tout d'abord, nous devons enregistrer un compte développeur sur la plateforme ouverte Amap. Après une inscription réussie, vous pouvez obtenir une clé API, qui est un paramètre obligatoire pour appeler l'API Amap.

2. Présentation de l'API Amap
   L'introduction de l'API Amap dans le document HTML peut être réalisée via le code suivant :

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

   Copier après la connexion

   Remplacez YOUR_API_KEY par votre propre clé API.

3. Créer un conteneur de carte
   Créez un élément DOM dans le document HTML en tant que conteneur de carte :

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

   Copier après la connexion

   Ici, la largeur et la hauteur du conteneur sont définies.

4. Initialisez la carte
   Initialisez la carte en code JavaScript, précisez le point central de la carte, le niveau de zoom et l'ID du conteneur de la carte :

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

   Copier après la connexion

   Les coordonnées de latitude et de longitude ici sont les coordonnées de Pékin.

5. Ajouter un contrôle de positionnement
   Pour faciliter le positionnement, vous pouvez ajouter un contrôle de positionnement sur la carte :

   AMap.plugin('AMap.Geolocation', function() {
     var geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,
    timeout: 10000
     });
   
     map.addControl(geolocation);
   
     geolocation.getCurrentPosition(function(status, result) {
    if (status === 'complete') {
      // 定位成功，更新地图中心点
      map.setCenter(result.position);
    }
     });
   });

   Copier après la connexion

   En appelant la classe AMap.Geolocation, créez une instance Geolocation et ajoutez-la à la carte. Appelez ensuite la méthode getCurrentPosition pour obtenir la latitude et la longitude de l'emplacement actuel et définissez le point central de la carte comme emplacement actuel.

6. Ajouter des marqueurs d'attractions populaires
   Ensuite, nous devons obtenir les données des attractions populaires et ajouter des marqueurs sur la carte. Habituellement, ces données peuvent être obtenues via l'API backend. Des données d'attraction simulées sont utilisées ici :

   var hotSpots = [
     {
    name: '故宫',
    location: [116.397428, 39.90923]
     },
     {
    name: '天安门广场',
    location: [116.397978, 39.903258]
     },
     {
    name: '颐和园',
    location: [116.272328, 39.991455]
     }
   ];

   Copier après la connexion

   Utilisez une boucle for pour parcourir les données, puis créez un marqueur et ajoutez-le à la carte :

   for (var i = 0; i < hotSpots.length; i++) {
     var marker = new AMap.Marker({
    position: hotSpots[i].location,
    title: hotSpots[i].name
     });
   
     map.add(marker);
   }

   Copier après la connexion

7. Ajoutez un événement de clic
   Afin de permettre à l'utilisateur d'afficher les informations détaillées de l'attraction lorsqu'il clique sur le marqueur, Nous pouvons ajouter un événement de clic à chaque marqueur pour afficher une fenêtre pop-up lorsqu'il clique :

   AMap.event.addListener(marker, 'click', function() {
     var infoWindow = new AMap.InfoWindow({
    content: '<h3>' + marker.getTitle() + '</h3>'
     });
   
     infoWindow.open(map, marker.getPosition());
   });

   Copier après la connexion

   Ici nous utilisons la méthode AMap.event.addListener pour ajouter un événement de clic au marqueur. Lorsque l'utilisateur clique sur le marqueur, une instance InfoWindow sera créée et l'affichera sur la carte via la méthode open.

8. Effet final
   Grâce aux étapes ci-dessus, nous avons mis en œuvre avec succès la fonction de recommandation d'attractions populaires dans des lieux. Des marqueurs d'attractions populaires sont ajoutés à la carte et des informations détaillées sur les attractions sont affichées en cliquant sur les marqueurs.

3. Résumé
Cet article utilise JavaScript et l'API Amap pour implémenter la fonction de recommandation d'attractions populaires en quelques étapes simples. Dans les projets réels, nous pouvons appeler d'autres fonctions de l'API Amap en fonction de besoins spécifiques pour obtenir davantage d'interactions cartographiques et d'effets d'affichage des données. J'espère que cet article pourra être utile aux débutants.

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!