作者：花罚，来自 

当前百度和高德周边查询api的实现机制基本一致，都是使用request接口请求远程https接口，然后返回参数中位置的某种类型的周边信息，最后再把数据动态绑定到页面。本文使用百度接口进行实现。

微信小程序创建地图容器相对来说比较简单，只需要一个map组件即可，下面代码将完成地图容器的创建： 

• map组件默认使用腾讯地图，只要在wxml中书写标签即可展示一个简易的地图容器，但是这个地图太过于简单，也没有什么可操作性，因此该标签还提供了一些特殊属性方便用户可以任意的操作和位置该组件，下面介绍几个常用的属性。

  • longitude & latitude 这两个属性一般都是成对出现，用于初始化地图中心位置
  • scale 该属性表示地图的缩放级别，数字越大比例尺越小。根据文档上说默认值为：16

上面的代码已经可以正常的创建地图容器了，但是所创建的地图大小不够，所以我们需要给map组件配上style属性，style属性是wxml中几乎所有组件均支持的属性，主要用于给主键配置显示效果。以下地图全屏代码同时适用于wxml的其他组件： 

对于组件的宽度全屏我们可以使用100%进行确定，但是高度全屏100%却不能起到任何效果，对此可以使用小程序的一个接口wx.getSystemInfo进行获取系统的高度，然后再动态绑定到map组件上。js代码如下：

3. 引入百度地图小程序api

• 解压后将bmap-wx.js放入小程序工程里面，我这里是创建一个叫utils的文件夹用于保存这些第三方的工具。

注：在开始使用该api之前，我们还需要去百度地图上获取一个微信小程序专用的key，在获取这个key的时候需要输入目标小程序的appid。

4. 使用api获取周边信息

BMap.search接口是用于获取周边信息的接口，官方描述为：查找并展示定位地点周边的POI信息，很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。

首先，我们来看一个BMap.search的使用案例:

从上面代码中可以看出我们为了使用该接口，在页面数据中加入了三个数据：latitude、longitude和markers，分别用于保存当前poi位置和周边信息的标记。还有看到我们在在page外申明了两个变量，bmap和wxMarkerData， 分别保存当前页面的api入口，poi接口返回数据。由于页面增加数据了，所以对应的页面也需要做出相应的变化，需要对map组件进行简单的修改：

同时添加了两个简单的wxss，这个wxss是给地图脚下增加的一个简单的导航样式

以上就完成了一个简单的地图周边组件，优化一下显示效果就差不多可以用了。当前还有一个问题就是百度api的bug问题，该bug如果不进行修复，那么将一直只能查询当前地址的周边信息，另外我查看了高德地图的poi周边接口，该接口就直接不提供指定位置的周边信息查询。