作者：花罰，來(lái)自原文地址 

原理

當(dāng)前百度和高德周邊查詢api的實(shí)現(xiàn)機(jī)制基本一致，都是使用request接口請(qǐng)求遠(yuǎn)程https接口，然后返回參數(shù)中位置的某種類型的周邊信息，最后再把數(shù)據(jù)動(dòng)態(tài)綁定到頁(yè)面。本文使用百度小程序接口進(jìn)行實(shí)現(xiàn)。

步驟

1. 創(chuàng)建地圖容器

微信小程序創(chuàng)建地圖容器相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，只需要一個(gè)map組件即可，下面代碼將完成地圖容器的創(chuàng)建： 
- wxml代碼

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

• 1
• 2

• 1
• 2

• map組件簡(jiǎn)介

  map組件默認(rèn)使用騰訊地圖，只要在wxml中書(shū)寫(xiě)

  • longitude & latitude 這兩個(gè)屬性一般都是成對(duì)出現(xiàn)，用于初始化地圖中心位置
  • scale 該屬性表示地圖的縮放級(jí)別，數(shù)字越大比例尺越小。根據(jù)文檔上說(shuō)默認(rèn)值為：16

2. 地圖容器全屏

上面的代碼已經(jīng)可以正常的創(chuàng)建地圖容器了，但是所創(chuàng)建的地圖大小不夠，所以我們需要給map組件配上style屬性，style屬性是wxml中幾乎所有組件均支持的屬性，主要用于給主鍵配置顯示效果。以下地圖全屏代碼同時(shí)適用于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中動(dòng)態(tài)綁定style的高  對(duì)于組件的寬度全屏我們可以使用100%進(jìn)行確定，但是高度全屏100%卻不能起到任何效果，對(duì)此可以使用小程序的一個(gè)接口wx.getSystemInfo進(jìn)行獲取系統(tǒng)的高度，然后再動(dòng)態(tài)綁定到map組件上。js代碼如下：

//index.js
var app = getApp()
Page({
    data: {
        height: 'auto'
    },
    onLoad: function () {
        //保證wx.getSystemInfo的回調(diào)函數(shù)中能夠使用this
        var that = this

        //調(diào)用wx.getSystemInfo接口，然后動(dòng)態(tài)綁定組件高度
        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放入小程序工程里面，我這里是創(chuàng)建一個(gè)叫utils的文件夾用于保存這些第三方的工具。
• 在js中使用var bmap = require('../../utils/bmap-wx.js')引入api

注：在開(kāi)始使用該api之前，我們還需要去百度地圖上獲取一個(gè)微信小程序?qū)Ｓ玫膋ey，在獲取這個(gè)key的時(shí)候需要輸入目標(biāo)小程序的appid。

4. 使用api獲取周邊信息

BMap.search接口是用于獲取周邊信息的接口，官方描述為：查找并展示定位地點(diǎn)周邊的POI信息，很快知道“我周圍有什么”。默認(rèn)返回生活服務(wù)、美食、酒店三種類型的POI。

首先，我們來(lái)看一個(gè)BMap.search的使用案例:

//index.js
var app = getApp()
//引入百度地圖api
var bmap = require('../../utils/bmap-wx.js')
//用于保存BMap.search接口返回的數(shù)據(jù)
var wxMarkerData = []
Page({
    data: {
        height: 'auto',
        markers: [], 
        latitude: '', 
        longitude: ''
    },
    onLoad: function () {
        //保證wx.getSystemInfo的回調(diào)函數(shù)中能夠使用this
        var that = this

        //構(gòu)造百度地圖api實(shí)例
        BMap = new bmap.BMapWX({ 
            ak: '***************' 
        })

        //調(diào)用wx.getSystemInfo接口，然后動(dòng)態(tài)綁定組件高度
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    height: res.windowHeight
                })
            }
        })
    },
    //查詢當(dāng)前位置的poi信息
    //官方文檔上說(shuō)可以查詢指定位置的周邊信息
    //然而當(dāng)前源碼中卻存在一個(gè)bug導(dǎo)致不能查詢指定位置的周邊信息
    search:function(e){

        var that = this

        //查詢失敗，直接打印log
        var fail = function(data) { 
            console.log(data) 
        }

        //查詢成功后將結(jié)果數(shù)據(jù)動(dòng)態(tài)綁定到頁(yè)面上
        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

從上面代碼中可以看出我們?yōu)榱耸褂迷摻涌冢陧?yè)面數(shù)據(jù)中加入了三個(gè)數(shù)據(jù)：latitude、longitude和markers，分別用于保存當(dāng)前poi位置和周邊信息的標(biāo)記。還有看到我們?cè)谠趐age外申明了兩個(gè)變量，bmap和wxMarkerData， 分別保存當(dāng)前頁(yè)面的api入口，poi接口返回?cái)?shù)據(jù)。由于頁(yè)面增加數(shù)據(jù)了，所以對(duì)應(yīng)的頁(yè)面也需要做出相應(yīng)的變化，需要對(duì)map組件進(jìn)行簡(jiǎn)單的修改：

<!--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='書(shū)店' class="nav-but">書(shū)店</button>
        <button bindtap="search" data-type='商場(chǎng)' class="nav-but">商場(chǎng)</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

同時(shí)添加了兩個(gè)簡(jiǎn)單的wxss，這個(gè)wxss是給地圖腳下增加的一個(gè)簡(jiǎn)單的導(dǎo)航樣式

/**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
• 14
• 15
• 16

以上就完成了一個(gè)簡(jiǎn)單的地圖周邊組件，優(yōu)化一下顯示效果就差不多可以用了。當(dāng)前還有一個(gè)問(wèn)題就是百度api的bug問(wèn)題，該bug如果不進(jìn)行修復(fù)，那么將一直只能查詢當(dāng)前地址的周邊信息，另外我查看了高德地圖的poi周邊接口，該接口就直接不提供指定位置的周邊信息查詢。