00:05
大家好,本期视频呢,来给大家演示一下腾讯位置当中的逆地址解析接口,那这个接口呢,和地址解析接口呢,刚好是相互对应的,那我们需要传过去的参数呢,是一个确定的地址,我们把坐标传过去之后呢,它会给我们返回一个对应的地址的信息,除此之外呢,还能够查到这个点周围的相关的信息啊,会返回一个POI的数组,那我们可以呢,拿到比较丰富的数据,我们也可以呢,使用地图组件呢,去做一个坐标拾取器,然后呢,实时的获得我想要查看的地址信息。好,首先呢,我们需要呢,先到腾讯位置的官网呢,去申请一个key,先进行一个账号的登录,然后呢,补全开发者信息之后啊,就可以在应用当中呢,去申请点击控制台。找到应用管理,找到我的应用,然后呢,点击创建应用呢,就可以获取一个key,那在这个key当中呢,我们要保证接下来我们要使用的这个接口是有相关权限的,现在呢,我们的逆地址解析接口呢,在web service API当中保证它是开启的,一会呢我们要使用到这个key的信息。
01:20
好,那我们的开发接口呢,是在。Web service API当中找到逆地址解析,那这个接口的使用呢,是比较简单的啊,有两个必传的参数,一个呢是开发者密钥,另外一个呢就是location。除此之外呢,我们可以指定get POI呢,是否开启默认呢,是不返回的,它能够返回周边的一个列表,这个返回的结果呢,稍微的复杂一些,大家可以看一下,如果我开启了POI的话呢。在这个当中会多包含一个po is,那它返回的是一个数组,这个数组里面呢,就包含很多个周边的一个信息啊,如果需要的话,大家可以开启一下,那现在我们先做一个最简单的测试,首先呢复制一下。
02:13
粘贴。需要传入两个参数,一个呢是key,一个是location key的话呢,我们复制一下。Location的话呢,先用文档当中的。坐标。好,发送。那我们可以看到呢,最明显的这个信息呢,就是address,它是详细地址,那如果说我们想要取到具体的建筑物的名称等其他的信息呢,可以在这呢查看一下,好,那接下来呢,我们要做一个功能,就是呢,先来实现一个坐标的一个拾取器,这个拾取器实现之后呢,会是这样的一个效果啊在官方文档当中呢,也有一个可以直接使用的这样的一个网页,实时获取到坐标之后呢,我们可以把这个坐标呢,都解析成地址,那为了保证这个效果啊,我们还是给它绑定点击事件的时候呢,再去解析,那这个坐标的实时显示呢,使用地图组件本身呢,就可以实现好,首先呢,我们先把最初的一个。
03:26
效果实现一下,这里面呢,我们要替换对应的key。好,这里边引入了地图的API,好,那在进行事件绑定的时候呢,是通过map的on方法,第一个参数呢,是事件的名称,这个可以在文档当中找到,另一个呢,就是对应的一个函数,我们预先定义了一个鼠标移动的函数,在移动的过程当中呢,通过event事件啊,就能够获得到它当前的一个坐标,坐标获得以后呢,通过已经定义好的这个label啊,去更新地图上的一个文本的标记,文本的内容呢,在content当中写出来,我们现在呢,就是一个坐标的显示,那具体的样式呢,大家可以在style。
04:16
对应的位置啊,去把它修改一下。好,现在呢,我们去看一下效果。地图呢是初始化成功了,然后呢,鼠标滑动的时候呢,是能够实时的显示坐标,那当鼠标移出的时候呢,我们把它的效果呢去掉啊,就是在div移出的时候去做一个remove的操作,同时呢,我们去给它定义一个click方法,等待呢去进行补全,当我有了这个坐标之后点击的时候呢,我希望他能够把这个地址呢给我显示出来。当然如果呢,我们不需要这个实时的显示这个坐标呢,我们在调试完成之后呢,就可以把这个事件呢移除掉,好首先呢,我们把代码呢去复制一下。
05:10
粘贴在这个里边呢,主要呢就是通过当前的这个坐标,同样呢是可以从event对象当中呢获取到,获取到之后呢,去请求接口带回一个数据,那现在呢,我只是简单的取了一下address,而且呢没有取周边的这个信息,这里边呢需要注意一下这个label的ID呢,要和刚才的这个点坐标的显示的ID呢有所区别,现在我们把T呢替换一下,然后呢就可以使用了。好保存。这样的话呢,当我点击某一个位置的时候呢,就能够查看到他当前的一个地址的信息。啊,这样的话呢,都是可以的,那我现在做的呢,只是一个最简单的案例,大家可以在这个基础之上呢,去做进一步的扩充和整合,那本期视频呢,就到这里,如果大家有任何问题呢,可以在视频下方留言,或者给我发送私信,我们下期再见。
我来说两句