腾讯位置 - 地点搜索原创

大家好，本期视频呢，来给大家介绍一下腾讯位置当中的地点搜索功能，那这个地点搜索功能呢，是我们做地图类应用啊，或者是整合地图相关功能的时候呢，一个很核心很常用的一个功能，那他所提供的三种方式呢，也是比较实用的，其中的一种呢，就是在指定城市当中呢，进行一个搜索，相当于我们在地图当中呢，直接使用搜索框输入一些关键字，然后呢通过匹配来得到一个结果，那另外一种方式呢，就是圆形区域搜索啊，也就是我们所说的这个周边搜索啊，我想从我当前的某一个点开始为圆心看一下周边呢有哪些匹配的结果，那最后一种呢，就是矩形的区域搜索，我们可以指定两个点的坐标啊，用他们来构建出一个矩形的区域，在这个区域当中呢，进行一个结果的筛选，那接下来呢，会使用一个地图标点的案例呢来完整。

那演示一下整个接口的一个调用效果。好，首先呢，我们还是先打开腾讯位置的官方网站去申请一个密钥，那申请密钥的过程呢，也是比较简单的，我们登录之后呢，补全一下开发者信息，然后呢就能够申请一个密钥，在申请密钥的时候呢，我们要做一个简单的设置啊，就保证我们要用的这个服务呢，是一个开启状态就可以了。好，我们来到控制台，那默认进来呢，就是开发者信息的一个界面，完成验证之后呢，我们来到T的管理，在这儿呢，创建一个新的密钥就可以了，创建完成之后呢，会显示在列表当中，我们点击一下设置啊，看一下它当前开启的服务有哪些，那比如说我们现在呢，就要用到web service的API啊，我们要保证它是一个勾选的状态，好接下来呢，我们打开开发文档啊，到web service API就能够找到地点搜索相关的一个描述，那在这个里边呢，我们要填写几个参数，首先呢，必不可少的就是我们刚刚申请的密钥，然后呢，就是用户在使用的过程当中所提交的搜索的关键字，那除了这个之外呢，还有一个控制搜索地理范围的一个参数，它的一个写法呢，在文档当中呢，也很详细的给大家描述了一下，那现在呢，我们先来演示一下第一种啊，就是在某。

一个城市当中去搜索用户提交的这个关键字，然后呢，来得到一个返回结果。那首先呢，我们可以使用postman。先复制一下请求的地址，然后呢在postman当中呢，去新建一个请求，指定为get方式，把这个URL呢粘贴到对应的位置，然后呢分别呢填写对应的参数，分别就是密钥关键字和搜索的一个范围，那密钥呢我们来到当中呢去复制一下。

关键字呢，我们先指定一个我们要搜索的名称呢，是超市，在某一个城市当中。直接使用案例当中的origin。那后面的这个数字呢，它所代表的含义呢，在文档的下方呢，有描述，就是是否呢，自动扩大搜索范围啊，大家可以呢，详细的去看一下。好，然后呢，点击发送。这样的话呢，我们就能够得到一个返回结果，我们所需要的这个核心数据呢，就在data当中，它对应的是一个数组啊，那每一个数组里面呢，都包含了它所找到的这个信息啊，地点的名称，还有呢，它所在的位置，我们如果想要在地图上有所表示的话呢，进行标点啊，或者是一些其他的操作的时候呢，用到的就是location当中的这个坐标，我们要把这个坐标呢提取出来啊，然后呢，在地图上来进行显示，好，那下面呢，我们来做一个完整的案例，那这个案例呢，需要用到我们之前给大家演示过的一个腾讯地图API啊，如果大家还没有做的话呢，可以先去看一下，那首先呢，我们要在页面当中呢，去引入他所需要的API啊，并且呢，配置自己的keep，然后呢，我们构建一个最简单的地图，那除此之外呢，我们还要在当中呢，去生明一个marker啊。

这个marker呢，要和这个map呢做一个绑定啊，一会我们要通过这个对象呢，向地图当中呢去追加一些标记点，那同时呢，在页面当中我们要定义一个文本框啊，同时呢配一个搜索的按钮，用户呢在文本框当中填写搜索内容之后啊，点击搜索按钮之后呢，就会触发一个方法，在这个方法里边呢，我们要完成接口的一个请求啊，并且呢，对这个接口返回的数据做一个处理，追加到地图当中，最后呢，我们要在地图当中完成一个点的标记的一个效果好，首先我们先复制一下。

然后呢，来粘贴一下，在这里边我们修改一下，呃，K的部分，把它呢改成我们自己。得到的密钥。这部分修改完成之后呢，对于中心点大家可以根据需要呢，自己来设定，或者是呢，直接获取呃用户的信息来确定的这个中心点的坐标，现在我们来预览一下效果好，我们地图呢已经初始化成功了，下面呢，我们来补全一下这个点击事件，那在这个点击事件当中呢，我们要获取一下搜索框输入的内容，同时呢，向接口发送请求，把返回的数据呢填充到地图当中，我们来看一下整个的过程，那在这个里边呢，其实比较简单。

我们呢，首先通过阿贾克斯啊去发送这个请求，那在发送请求的时候呢，我们现在给大家演示呢，是中心点的一个搜索啊，就是相当于呢，是搜索周边的一个功能，所以说呢，这个搜索周边的时候呢，它所需要的这个数据是一个中心点的坐标，以及一个搜索的范围啊，它的取值范围呢，是从十到1000啊，单位是米，我们这里边呢，先给它默认指定为500啊，大家也可以把它改成一个动态的参数，所以呢，这个中心点的坐标我们是可以在地图当中动态的去取到的，因为这个地图初始化之后呢，用户是可以拖动它啊去改变它的，那我们必须呢，先来获取一下，通过这个map里边的方法呢，就能够得到一个中心点的坐标，同时呢，我们搜索框的内容呢，是可以获取到的，我们把这几个参数呢，给它整合到一起。

变成了一个完整的我需要传过去的一个参数，那在传输完成之后呢，它得到的这个数据核心呢，就在data里边啊，我们把它获取到之后呢，进行一个便利，在便利的时候呢，我们取出我们需要的内容，那像这个ID呢，是比较重要的，是一个唯一的标识，那这里边呢，我们先通过数组的下标呢来临时代替了一下，那style ID呢，是指定这个标记点的样式，其中这个ER呢，是一个内置的样式，我们可以直接使用，然后呢，我们取出的这个中心点坐标，我们要在position当中去给它拼接一下，重新的去构建一个对象啊，放在对应的位置，好，我们把这部分代码呢也复制一下。

粘贴同样呢，我们要把K的部分呢替换一下。好，现在我们来看一下效果。在搜索框当中呢，输入一个我想要查找的内容，点击搜索，这样呢，直接就可以在地图当中呢，显示坐标位置，那具体的这个样式和它展示的这个信息呢，大家可以根据文档去详细的一个设置好，那本期视频呢就到这里，大家如果有任何问题呢，可以在视频下方留言，或者给我发送私信，我们下期再见。