微信小程序之地图周边（使用百度地图接口）

作者：花罚，来自原文地址 

原理

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

步骤

1. 创建地图容器

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

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

• 1
• 2

• 1
• 2

• 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>

• 1
• 2
• 3

• 1
• 2
• 3

• 在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
                })
            }
        })

    }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

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 
        })
    }

})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67

从上面代码中可以看出我们为了使用该接口，在页面数据中加入了三个数据：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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

同时添加了两个简单的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;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 邀请