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

搜索地点 最后更新时间: 2024年07月12日

本文介绍如何根据关键词在地图上查找相关的地点,并在搜索结果中显示地点的位置信息、联系方式等。

提示

根据关键字获取相关的地点 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方法按需引入插件,在plugin回调之后使用插件功能。插件引入方式 插件的使用

AMap.plugin(["AMap.PlaceSearch"], function () {
  const placeSearch = new AMap.PlaceSearch({
    pageSize: 5, //单页显示结果条数
    pageIndex: 1, //页码
    city: "010", //兴趣点城市
    citylimit: true, //是否强制限制在设置的城市内搜索
    map: map, //展现结果的地图实例
    panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>,结果列表将在此容器中进行展示。
    autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
  });
  placeSearch.search("北京大学"); //使用插件搜索关键字并查看结果
});

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

注意:你可以通过CSS自定义结果面板的样式,包括宽高、位置等属性

自定义搜索结果

如果你不想使用 JS API 的结果面板,panel可以缺省或者赋值false,然后在search()的回调中处理自己的逻辑,自定义搜索教程前往 输入提示与 POI 搜索

//在回调函数中使用插件功能
placeSearch.search("北京大学", function (status, result) {
  //查询成功时,result 即对应匹配的 POI 信息
});

2、本章涉及的属性及方法说明

2.1 AMap.PlaceSearch

参数/方法

说明

类型 

参数值描述 

默认值

pageSize

单页显示结果条数

Number

0 - 100

20

pageIndex

页码

Number

>=1

1

city

兴趣点城市

String

城市名(中文或中文全拼)、citycode、adcode

'全国'

citylimit

是否强制限制在设置的城市内搜索

Boolean

true | false

false

map

展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上

AMap.Map

-

-

panel

结果列表的 HTML 容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。

String |

HTMLElement|

Boolean

属性值为Boolean类型时,可选值只可为false

-

autoFitView

用于控制在搜索结束后,是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围

Boolean

true | false

-

search()

根据输入关键字提示匹配信息,支持中文、拼音

 Function

-

-

返回顶部 示例中心 常见问题 智能客服 公众号
二维码