微信小程序使用百度地图api

原理

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

步骤

1. 创建地图容器

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

map组件简介

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

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

2. 地图容器全屏

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

     
     

 

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

• //index.js
  var 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.js
var app = getApp()
//引入百度地图api
var 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组件进行简单的修改：

    
    
        酒店
        美食
        书店
        商场
    

同时添加了两个简单的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周边接口，该接口就直接不提供指定位置的周边信息查询。