一 需求分析：

以該小區(qū)為中心，實(shí)現(xiàn)周邊配套的檢索，切換不同種類的檢索條件，刷新頁(yè)面，并以氣泡的方式顯示出來(lái)，效果如下~

屏幕快照 2019-09-21 上午11.25.45.png

二 實(shí)現(xiàn)方式：

• 底部我是用的vant組件的tabbar來(lái)實(shí)現(xiàn)切換顯示
• 下載微信小程序JavaScriptSDK
  
• 引入SDK，并且實(shí)例化API核心類

var QQMapWX = require('../../../libs/qqmap-wx-jssdk.js')
var app = getApp()
// 實(shí)例化API核心類
var qqmapsdk = new QQMapWX({
  key: app.globalData.map_key // 必填
});

• 當(dāng)切換底部標(biāo)簽時(shí)，獲取要搜索的關(guān)鍵字，調(diào)用接口，實(shí)現(xiàn)搜索

// 事件觸發(fā)，調(diào)用接口
  nearby_search: function() {
    var _this = this;
    // 調(diào)用接口
    qqmapsdk.search({
      keyword: _this.data.kewWord, //搜索關(guān)鍵詞
      location: {
        latitude: _this.data.lat,
        longitude: _this.data.lng
      }, //設(shè)置周邊搜索中心點(diǎn)
      success: function(res) { //搜索成功后的回調(diào)
        var mks = []
        //在此將小區(qū)的位置坐標(biāo)點(diǎn)加載出來(lái)
        mks.push({
          latitude: _this.data.lat,
          longitude: _this.data.lng
        })
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 獲取返回結(jié)果，放到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, //圖標(biāo)路徑
            width: 24,
            height: 28,
            callout : {
              color : "#fff",
              padding : 8,
              content: res.data[i].title,
              borderRadius : 5,
              bgColor: "#3072f6",
              fontSize : 12
            }
          })
        }
        _this.setData({ //設(shè)置markers屬性，將搜索結(jié)果顯示在地圖中
          markers: mks
        })
      },
      fail: function(res) {
        console.log(res);
      },
      complete: function(res) {
        console.log(res);
      }
    });
  },

到這里基本上就實(shí)現(xiàn)了周邊配套的需求，現(xiàn)在你需要做的不過(guò)是，規(guī)整一下整體邏輯和交互，當(dāng)點(diǎn)擊圖標(biāo)會(huì)出現(xiàn)氣泡框，具體氣泡的顯示方式參照微信小程序的map組件即可