Comment utiliser JS et Amap pour implémenter la fonction de recherche de POI autour de l'emplacement

Comment utiliser JS et Amap pour implémenter la fonction de recherche de POI autour de lieux

Avec le développement de l'Internet mobile, les applications cartographiques sont devenues un élément indispensable des utilisateurs de téléphones mobiles. Lors du développement d'applications cartographiques, il est souvent nécessaire d'obtenir des informations sur les POI à proximité pour répondre aux besoins des utilisateurs. Cet article expliquera comment utiliser JavaScript et l'API Amap pour implémenter la fonction de recherche de POI autour d'un emplacement et montrera quelques exemples de code spécifiques.

Tout d'abord, nous devons introduire le fichier JavaScript de l'API Amap Map dans le fichier HTML. Ceci peut être réalisé en ajoutant le code suivant à la balise head :

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

VotreApiKey ici doit être remplacée par la clé de l'API Amap pour laquelle vous avez postulé. Pour demander une clé, veuillez vous référer à la documentation du développeur Amap.

Ensuite, nous devons obtenir les informations de latitude et de longitude de l'utilisateur dans le code JavaScript afin de rechercher des POI à proximité. Ceci peut être obtenu via l'API de géolocalisation du navigateur. Voici un exemple de code pour obtenir les coordonnées de localisation de l'utilisateur :

navigator.geolocation.getCurrentPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;

  // 以下是高德地图API的代码，用于创建地图和标注用户位置
  var map = new AMap.Map('mapContainer', {
    center: [longitude, latitude],
    zoom: 13
  });
  
  var marker = new AMap.Marker({
    position: [longitude, latitude]
  });

  map.add(marker);
});

Le mapContainer dans le code ci-dessus est l'identifiant d'un élément conteneur dans le fichier HTML, utilisé pour afficher la carte. Une carte est créée et centrée sur l'emplacement de l'utilisateur, et une étiquette est ajoutée pour représenter l'emplacement de l'utilisateur.

Ensuite, nous pouvons effectuer une recherche de POI autour de l'emplacement en fonction de l'emplacement et des mots-clés de l'utilisateur. Ce qui suit est un exemple de code pour rechercher et afficher les POI à proximité :

// 根据用户位置和关键词进行地点搜索
var keyword = '餐厅';
AMap.service('AMap.PlaceSearch').then(function() {
  var placeSearch = new AMap.PlaceSearch({
    pageSize: 10,
    pageIndex: 1,
    citylimit: true,
    map: map
  });

  placeSearch.searchNearBy(keyword, [longitude, latitude], 1000, function(status, result) {
    if (status === 'complete') {
      var pois = result.poiList.pois;
      
      // 遍历搜索结果，展示POI标注
      pois.forEach(function(poi) {
        var poiMarker = new AMap.Marker({
          position: [poi.location.lng, poi.location.lat]
        });

        map.add(poiMarker);
      });
    }
  });
});

Les mots-clés dans le code ci-dessus sont des mots-clés de recherche et peuvent être modifiés en fonction des besoins réels. La méthode searchNearBy est utilisée pour effectuer des recherches de POI autour de l'emplacement. Les paramètres sont des mots-clés, les coordonnées de l'emplacement de l'utilisateur, le rayon de recherche et la fonction de rappel. Le paramètre de résultat dans la fonction de rappel contient les informations sur le résultat de la recherche et peut être traité selon les besoins.

Enfin, nous devons ajouter un élément conteneur au fichier HTML pour afficher la carte. Par exemple :

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

La largeur et la hauteur dans le code ci-dessus peuvent être ajustées en fonction des besoins réels.

Grâce au code ci-dessus, nous pouvons utiliser JavaScript et l'API Amap pour implémenter la fonction de recherche de POI autour de l'emplacement et afficher le POI recherché sur la carte. Les lecteurs peuvent développer et optimiser davantage le code en fonction de leurs propres besoins pour obtenir des fonctions plus riches.

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!