开发 地图 JS API 2.0 入门教程 搜索地点

地点搜索 最后更新时间: 2023年04月04日

如果您需要根据关键字获取对应城市里相关的地点POI信息,需要使用JS API搜索的能力。POI搜索将使用关键字搜索AMap.PlaceSearch插件。

准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

搜索POI

假如要在北京搜索北京大学相关的POI。

1

创建地图

const map = new AMap.Map('container', {
  viewMode: '2D',  // 默认使用 2D 模式
  zoom:11,  //初始化地图层级
  center: [116.397428, 39.90923]  //初始化地图中心点
});
2

引入和创建插件实例

与前面提到的控件的引入和安装一样,推荐使用异步安装插件。

const placeSearch = new AMap.PlaceSearch({
  pageSize: 5, // 单页显示结果条数
  pageIndex: 1, // 页码
  city: "010", // 兴趣点城市
  citylimit: true,  //是否强制限制在设置的城市内搜索
  map: map, // 展现结果的地图实例
  panel: "panel", // 结果列表将在此容器中进行展示。
  autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
3

使用插件搜索关键字并查看结果

placeSearch.search('北京大学');

因为实例化插件时,使用了 panel 参数,所以执行了search()之后,搜索结果将展示在结果面板中:

自定义搜索结果

如果你不想使用JS API的结果面板,panel可以缺省或者赋值false,然后可以在search()的回调中处理自己的逻辑。

placeSearch.search('北京大学', function (status, result) {
   // 查询成功时,result即对应匹配的POI信息
});
示例
中心
常见
问题
智能
客服