搜索地点 最后更新时间: 2023年12月04日
如果想要根据关键字获取相关的地点 POI 信息,可以使用AMap.PlaceSearch地点搜索插件,本文介绍如何根据关键词在地图上查找相关的地点,并在搜索结果中显示地点的位置信息、联系方式等。
关键字查询示例
1、实现步骤
假如要在北京搜索北京大学相关的 POI。
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作。
提示
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
2
1.2 创建地图
const map = new AMap.Map("container", {
viewMode: "2D", //默认使用 2D 模式
zoom: 11, //地图级别
center: [116.397428, 39.90923], //地图中心点
});
3
1.3 引入和创建插件实例
与前面提到的控件的引入和安装一样,推荐使用异步安装插件,插件引入方式 插件的使用。
AMap.plugin(["AMap.PlaceSearch"], function () {
const placeSearch = new AMap.PlaceSearch({
pageSize: 5, //单页显示结果条数
pageIndex: 1, //页码
city: "010", //兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: map, //展现结果的地图实例
panel: "my-panel", //结果列表将在此容器中进行展示。
autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
});
});
提示
panel参数值为你页面定义容器的 id 值 <div id="my-panel"></div>。
4
1.4 使用插件搜索关键字并查看结果
placeSearch.search('北京大学');
因为实例化插件时,使用了panel参数,所以执行了search()之后,搜索结果将展示在结果面板中:
自定义搜索结果
如果你不想使用 JS API 的结果面板,panel可以缺省或者赋值false,然后可以在search()的回调中处理自己的逻辑,自定义搜索教程前往 输入提示与 POI 搜索。
placeSearch.search("北京大学", function (status, result) {
//查询成功时,result 即对应匹配的 POI 信息
});