小程序地图开发周边信息POI展示为列表

##首先附上效果图

在我前面的文章中我详述过如何使用百度地图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>