JS 与高德地图结合实现地点周边 POI 搜索功能的方法

在现代 Web 开发中，地图相关的功能需求日益增长，地点周边 POI（Point of Interest，兴趣点）搜索功能尤为实用。借助 JS 与高德地图结合，能高效实现这一功能。

要在项目中引入高德地图 API。可通过在 HTML 文件中添加 script 标签，引用高德地图提供的 JavaScript API 链接。申请开发者密钥（AK），这是访问 API 的凭证，将其正确配置在引用链接中。

创建地图实例是基础步骤。使用 JS 代码，通过 AMap.Map 方法创建地图对象，并指定地图容器的 ID 和相关参数，如中心点坐标和缩放级别。例如：

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

接下来是实现 POI 搜索功能的关键部分。引入 AMap.PoiSearch 类，创建搜索实例。可以设置搜索参数，如搜索关键词、范围、类型等。例如，要搜索当前地图中心点周边 1000 米范围内的餐厅：

var poiSearch = new AMap.PoiSearch({
    pageSize: 10,
    pageIndex: 1,
    keyword: '餐厅',
    radius: 1000,
    location: [116.397428, 39.90923]
});

为搜索实例绑定回调函数，用于处理搜索结果。当搜索完成后，回调函数会被触发，通过结果对象获取 POI 数据，并在地图上标注出来。代码如下：

poiSearch.on('complete', function (result) {
    var pois = result.poiList.pois;
    for (var i = 0; i < pois.length; i++) {
        var marker = new AMap.Marker({
            position: pois[i].location
        });
        marker.setMap(map);
    }
});

最后，执行搜索操作。调用 poiSearch.search 方法即可开始搜索：

poiSearch.search();

通过上述步骤，利用 JS 与高德地图 API 的强大功能，就能成功实现地点周边 POI 搜索功能。该功能不仅能提升用户在地图应用中的体验，还能为各类项目如生活服务类网站、旅游应用等增添实用价值，方便用户快速找到周边感兴趣的地点，从而增强项目的实用性和竞争力。