微信小程序周边配套的实现

一 需求分析：

以该小区为中心，实现周边配套的检索，切换不同种类的检索条件，刷新页面，并以气泡的方式显示出来，效果如下~

屏幕快照 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组件即可