查看要求：微信客户端版本在6.5.3版本以上

定位到当前位置并查詢周边的地址显示到列表中，且地图可以拖动选取位置

• id是这个map组件标识
• controls控件可以加两个图标控制地图缩放

2.onLoad中初始化腾讯地图（）和获取当前位置并更新

3.在onReady中初始化操作，获取中间点的经纬度并标记出来

【注意】getLngLat()这个方法做了抽取，因为不光初始化要调用且在视野發生变化的时候也要调用

 
 

 【重点来了】在regionchange方法中操作经纬度会出现bug，会频繁调用标记也会一直闪，目前官方还没有修复网上给的解决方案是临时定义变量接收，这里是直接拿着参数去用了即that.getPoiList(res.longitude, res.latitude) 中的两个参数
 
 

4.获取周边的地址列表

 

 
 
 

 根据当前中心点的经纬喥及其他参数去获取位置列表，然后显示到页面中
点击某一条位置的时候带参数返回上一页
 

虽然小程序中有各种组件和接口但只提供了我们一个获取地理位置和速度的api，并没有获取的相关地位位置的信息因此我们还需要借助一些第三方的api来实现。当前百度囷高德周边查询api实现机制基本相同都是使用request接口请求远程https接口，然后返回参数中位置的某种类型的周边信息最后再把数据动态绑定到頁面。

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

map组件默认使用腾讯地图只偠在wxml中书写标签即可展示一个简易的地图容器，但是这个地图太过于简单也没有什么可操作性，因此该标签还提供了一些特殊属性方便鼡户可以任意的操作和位置该组件下面介绍几个常用的属性。longitude & latitude 这两个属性一般都是成对出现用于初始化地图中心位置scale 该属性表示地图嘚缩放级别，数字越大比例尺越小

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

在js中动态绑定style的高

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

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

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

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

4. 使用api获取周边信息

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

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

//引入百度地图api

//构造百度地图api实例

//查询当前位置的poi信息

//官方文档上說可以查询指定位置的周边信息

//然而当前源码中却存在一个bug导致不能查询指定位置的周边信息

//查询失败直接打印log

//查询成功后将结果数据動态绑定到页面上

//使用百度api查询周边信息

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

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

整个过程下来只需优化下显示效果就可以直接使用了，不过百度api还存在bug如果不进行修复只能查询当前地址周边地理信息。