一 需求分析：
以該小區(qū)為中心烈拒，實現(xiàn)周邊配套的檢索段磨，切換不同種類的檢索條件镇饮，刷新頁面蜓竹，并以氣泡的方式顯示出來，效果如下~
屏幕快照 2019-09-21 上午11.25.45.png
二 實現(xiàn)方式：
- 底部我是用的vant組件的tabbar來實現(xiàn)切換顯示
-
下載微信小程序JavaScriptSDK
- 引入SDK盒让，并且實例化API核心類
var QQMapWX = require('../../../libs/qqmap-wx-jssdk.js')
var app = getApp()
// 實例化API核心類
var qqmapsdk = new QQMapWX({
key: app.globalData.map_key // 必填
});
- 當切換底部標簽時，獲取要搜索的關鍵字司蔬，調用接口邑茄，實現(xiàn)搜索
// 事件觸發(fā)，調用接口
nearby_search: function() {
var _this = this;
// 調用接口
qqmapsdk.search({
keyword: _this.data.kewWord, //搜索關鍵詞
location: {
latitude: _this.data.lat,
longitude: _this.data.lng
}, //設置周邊搜索中心點
success: function(res) { //搜索成功后的回調
var mks = []
//在此將小區(qū)的位置坐標點加載出來
mks.push({
latitude: _this.data.lat,
longitude: _this.data.lng
})
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 獲取返回結果俊啼，放到mks數(shù)組中
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: _this.data.img, //圖標路徑
width: 24,
height: 28,
callout : {
color : "#fff",
padding : 8,
content: res.data[i].title,
borderRadius : 5,
bgColor: "#3072f6",
fontSize : 12
}
})
}
_this.setData({ //設置markers屬性肺缕，將搜索結果顯示在地圖中
markers: mks
})
},
fail: function(res) {
console.log(res);
},
complete: function(res) {
console.log(res);
}
});
},
到這里基本上就實現(xiàn)了周邊配套的需求，現(xiàn)在你需要做的不過是授帕，規(guī)整一下整體邏輯和交互同木，當點擊圖標會出現(xiàn)氣泡框，具體氣泡的顯示方式參照微信小程序的map組件即可
