作者：花罰，來自原文地址

原理

當前百度和高德周邊查詢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放入小程式工程裡面，我這裡是建立一個叫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
• 14
• 15
• 16

以上就完成了一個簡單的地圖周邊元件，優化一下顯示效果就差不多可以用了。當前還有一個問題就是百度api的bug問題，該bug如果不進行修復，那麼將一直只能查詢當前地址的周邊資訊，另外我查看了高德地圖的poi周邊介面，該介面就直接不提供指定位置的周邊資訊查詢。