##首先附上效果图
在我前面的文章中我详述过如何使用百度地图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>