原理
當前百度和高德周邊查詢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.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組件進行簡單的修改：
<!--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周邊接口，該接口就直接不提供指定位置的周邊信息查詢。