##首先附上效果图

在我前面的文章中我详述过如何使用百度地图API来开发小程序的地图，所以这里面就不说基础内容了。
直说如下：

##1.如何获取列表：

//分类存储  makertap: function(e) {    var that = this;    var id = e.markerId;    that.showSearchInfo(wxMarkerData, id);  },  onLoad: function() {    var that = this;    //初始化的时候渲染wxSearchdata    WxSearch.init(that, 400, ['家政', '药店', '公厕', '银行', '营业厅', '医院', '超市', '地铁站', '停车场', '维修', '美食', '饭店']);    WxSearch.initMindKeys(['家政公司', '保洁公司', '大药房', '药店', '免费公厕', '营业厅', '银行ATM', '三甲医院', '地下停车场', '地铁口', '汽车美容', '饭店', '美食广场', '中石化加油站', '中石油加油站']);    // 新建百度地图对象     var BMap = new bmap.BMapWX({      ak: 'jXYZ2cjB0lwQYiI8einLVGGEv7Q0zfDz'    });    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      })      that.setData({        dataArray: data.wxMarkerData      })    };    // 发起POI检索请求     BMap.search({      "query": "",      fail: fail,      success: success,      // 此处需要在相应路径放置图片文件       iconPath: '../../images/marker_red.png',      // 此处需要在相应路径放置图片文件       iconTapPath: '../../images/marker_red.png'    });  },

在onload中加载对地图的请求，并将数据存储起来，这里面请求到的数据是数组形式可以直观的展示出来的。
我们就用一个数组来存储。
在公共data中存储一个dataArray，在onload加载请求成功后存储一个dataArray

this.setData({dataArray: data.wxMarkerData})

同样的我们在搜索函数中也要存储上，具体是在哪个函数呢？
看下面

//点击事件  wxSearchFn: function(e) {    var that = this;    total = 0;    code = e.currentTarget.dataset.code + "";    var name = e.currentTarget.dataset.text + "";    this.data.dataArray = [];    //显示选择结果    this.setData({      title: "周边信息: " + name    })    WxSearch.wxSearchAddHisKey(that);    // 新建百度地图对象     var BMap = new bmap.BMapWX({      ak: 'jXYZ2cjB0lwQYiI8einLVGGEv7Q0zfDz'    });    var fail = function(data) {      console.log(data)    };    var success = function(data) {      wxMarkerData = data.wxMarkerData;      console.log("++++++++", data)      that.setData({        markers: wxMarkerData      });      that.setData({        latitude: wxMarkerData[0].latitude      });      that.setData({        longitude: wxMarkerData[0].longitude      })      that.setData({        dataArray: data.wxMarkerData      })    };    // 发起POI检索请求     console.log("当前点击", name)    BMap.search({      query: name,      fail: fail,      success: success,      // 此处需要在相应路径放置图片文件       iconPath: '../../images/marker_red.png',      // 此处需要在相应路径放置图片文件       iconTapPath: '../../images/marker_red.png'    });  },

以及对应的前端页面展示。这里onlaod中展示的是默认加载出来的列表。 wxSearchFn是我们点击上面的分类进行搜索展示对应分类信息列表。
##2.前端页面展示
用一个wx:for来循环整个列表，然后获取对应数据内容，展示你想展示的id进行排序，其他字段根据个人需求来展示。

block wx:for="{{dataArray}}" wx:for-item="item" wx:key=""  view class='dataArray'    text{{item.id+1}}：{{item.title}}/text  /view  view class='dataArray'    text位置：{{item.address}}/text  /view/block