2023如何使用JS和高德地图实现地点周边POI搜索功能

如何使用JS和高德地图实现地点周边POI搜索功能

随着移动互联网的发展，地图应用已经成为手机用户不可或缺的一部分。而在开发地图应用时，经常需要通过获取附近的POI信息来满足用户的需求。本文将介绍如何使用JavaScript和高德地图API实现地点周边POI搜索功能，并展示一些具体的代码示例。

首先，我们需要在HTML文件中引入高德地图API的JavaScript文件。可以通过在head标签中添加以下代码来实现：

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

这里的yourApiKey需要替换成你自己申请的高德地图API的密钥。密钥的申请可参考高德地图开发者文档。

接下来，我们需要在JavaScript代码中获取用户所在的经纬度信息，以便进行附近POI搜索。这可以通过浏览器的Geolocation API来获取。以下是获取用户位置坐标的代码示例：

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);
});

上述代码中的mapContainer是HTML文件中一个容器元素的id，用于展示地图。创建了地图并将其中心设置为用户的位置，并添加了一个标注表示用户的位置。

然后，我们可以根据用户的位置和关键词进行地点周边POI搜索。以下是搜索并展示附近POI的代码示例：

// 根据用户位置和关键词进行地点搜索
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);
      });
    }
  });
});

上述代码中的keyword是搜索关键词，可以根据实际需求进行更改。searchNearBy方法用于执行地点周边POI搜索，参数分别为关键词、用户位置坐标、搜索半径以及回调函数。回调函数中的result参数包含了搜索结果的信息，可以根据需求进行处理。

最后，我们需要在HTML文件中添加一个用于展示地图的容器元素。例如：

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

上述代码中的width和height可以根据实际需求进行调整。

通过以上代码，我们可以实现使用JavaScript和高德地图API来实现地点周边POI搜索功能，并将搜索到的POI在地图上展示出来。读者可以根据自己的需求，进一步扩展和优化代码，实现更丰富的功能。