作者:花罚,来自原文地址原理当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面。本文使用百度小程序接 ...
当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面。本文使用百度小程序接口进行实现。
微信小程序创建地图容器相对来说比较简单,只需要一个map组件即可,下面代码将完成地图容器的创建:
- wxml代码
map组件简介
map组件默认使用腾讯地图,只要在wxml中书写
上面的代码已经可以正常的创建地图容器了,但是所创建的地图大小不够,所以我们需要给map组件配上style属性,style属性是wxml中几乎所有组件均支持的属性,主要用于给主键配置显示效果。以下地图全屏代码同时适用于wxml的其他组件: - 在map组件上加上style
wx.getSystemInfo
进行获取系统的高度,然后再动态绑定到map组件上。js代码如下:var bmap = require('../../utils/bmap-wx.js')
引入api注:在开始使用该api之前,我们还需要去百度地图上获取一个微信小程序专用的key,在获取这个key的时候需要输入目标小程序的appid。
BMap.search
接口是用于获取周边信息的接口,官方描述为:查找并展示定位地点周边的POI信息,很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。
首先,我们来看一个BMap.search
的使用案例:
从上面代码中可以看出我们为了使用该接口,在页面数据中加入了三个数据:latitude、longitude和markers,分别用于保存当前poi位置和周边信息的标记。还有看到我们在在page外申明了两个变量,bmap和wxMarkerData, 分别保存当前页面的api入口,poi接口返回数据。由于页面增加数据了,所以对应的页面也需要做出相应的变化,需要对map组件进行简单的修改:
同时添加了两个简单的wxss,这个wxss是给地图脚下增加的一个简单的导航样式
以上就完成了一个简单的地图周边组件,优化一下显示效果就差不多可以用了。当前还有一个问题就是百度api的bug问题,该bug如果不进行修复,那么将一直只能查询当前地址的周边信息,另外我查看了高德地图的poi周边接口,该接口就直接不提供指定位置的周边信息查询。