小程序之地图周边

原理

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

步骤

1. 创建地图容器

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

<!-- index.wxml --><map id="map" longitude="113.324520" latitude="23.099994" scale="14"></map>

• map组件简介

  map组件默认使用腾讯地图，只要在wxml中书写

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

2. 地图容器全屏

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

<!-- index.wxml --><map id="map" longitude="113.324520" latitude="23.099994" scale="14" style="width: 100%; height: {{height}}px;"></map>

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

//index.jsvar app = getApp()Page({    data: {        height: 'auto'    },    onLoad: function () {        //保证wx.getSystemInfo的回调函数中能够使用this        var that = this        //调用wx.getSystemInfo接口，然后动态绑定组件高度        wx.getSystemInfo({            success: function (res) {                that.setData({                    height: res.windowHeight                })            }        })    }})

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

• 下载bmap-wx.js
• 解压后将bmap-wx.js放入小程序工程里面，我这里是创建一个叫utils的文件夹用于保存这些第三方的工具。
• 在js中使用var bmap = require('../../utils/bmap-wx.js')引入api

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

4. 使用api获取周边信息

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

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

//index.jsvar app = getApp()//引入百度地图apivar bmap = require('../../utils/bmap-wx.js')//用于保存BMap.search接口返回的数据var wxMarkerData = []Page({    data: {        height: 'auto',        markers: [],         latitude: '',         longitude: ''    },    onLoad: function () {        //保证wx.getSystemInfo的回调函数中能够使用this        var that = this        //构造百度地图api实例        BMap = new bmap.BMapWX({             ak: '***************'         })        //调用wx.getSystemInfo接口，然后动态绑定组件高度        wx.getSystemInfo({            success: function (res) {                that.setData({                    height: res.windowHeight                })            }        })    },    //查询当前位置的poi信息    //官方文档上说可以查询指定位置的周边信息    //然而当前源码中却存在一个bug导致不能查询指定位置的周边信息    search:function(e){        var that = this        //查询失败，直接打印log        var fail = function(data) {             console.log(data)         }        //查询成功后将结果数据动态绑定到页面上        var success = function(data) {             wxMarkerData = data.wxMarkerData;             that.setData({                 markers: wxMarkerData             })            that.setData({                 latitude: wxMarkerData[0].latitude             })            that.setData({                 longitude: wxMarkerData[0].longitude             })        }        //使用百度api查询周边信息        //其中使用到了dataset属性        BMap.search({            query: e.target.dataset.type,             success: success,            fail: fail         })    }})

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

<!--index.wxml--><view style="width: 100%; height: {{height}}px;">    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14"     markers="{{markers}}"  style="width: 100%; height: {{height-30}}px;"></map>    <view class="nav">        <button bindtap="search" data-type='酒店' class="nav-but">酒店</button>        <button bindtap="search" data-type='美食' class="nav-but">美食</button>        <button bindtap="search" data-type='书店' class="nav-but">书店</button>        <button bindtap="search" data-type='商场' class="nav-but">商场</button>    </view></view>

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

/**index.wxss**/.nav{  position: fixed;  z-index: 10000;  bottom: 0px;  width: 100%;  height: 30px;}.nav-but{  border: cadetblue 1px solid;  border-radius: 0px;  width: 25%;  text-align: center;    line-height: 30px;  display: inline-flex;}

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