一 需求分析：
以该小区为中心，实现周边配套的检索，切换不同种类的检索条件，刷新页面，并以气泡的方式显示出来，效果如下~
屏幕快照 2019-09-21 上午11.25.45.png
二 实现方式：
- 底部我是用的vant组件的tabbar来实现切换显示
-
下载微信小程序JavaScriptSDK
- 引入SDK，并且实例化API核心类
var QQMapWX = require('../../../libs/qqmap-wx-jssdk.js')
var app = getApp()
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: app.globalData.map_key // 必填
});
- 当切换底部标签时，获取要搜索的关键字，调用接口，实现搜索
// 事件触发，调用接口
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 = []
//在此将小区的位置坐标点加载出来
mks.push({
latitude: _this.data.lat,
longitude: _this.data.lng
})
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 获取返回结果，放到mks数组中
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);
}
});
},
到这里基本上就实现了周边配套的需求，现在你需要做的不过是，规整一下整体逻辑和交互，当点击图标会出现气泡框，具体气泡的显示方式参照微信小程序的map组件即可
