最近在开发微信小程序中,无意中遇到一个问题,就是地图显示电子围栏,但是后端返回的值不满足它小程序给的组件的要求的数据,这时候需要迭代微信请求所返回的数据,找出需要的数据。
重点:这里拿区域举例:polygons有points、 strokeWidth、strokeColor、fillColor等属性,但是核心还是其中的points,其中包含一个个经纬度坐标,但是如果返回的值中含有多个区域,该怎么办呢?
小程序提供了setData方法,只要返回数据满足polygons要求就行,即其中的定义的变量接收return的值即可(return 返回的要求必须满足格式,恶心心,搞人心态)
话不多说上代码:
//进行骑行区域查找,根据经纬度查询附近的骑行区域
function finddrivingArea(that, log, lat) {
//请求后端数据
wx.request({
url: "http://localhost:8084/get/drivingAreas",
method: 'GET',
data: {
longitude: log,
latitude: lat,
},
success: function (res) {
console.log(res)
//console.log(res)
//函数式编程,将每个GeoResult中的单词数据迭代出来
var object1={"points":null, strokeWidth:2, strokeColor:"#FF000010",fillColor:"#FF000020"};
const spolygons = res.data.content.map((reslut) => {
var polygon1 =JSON.stringify(reslut.content.geoJsonPolygon)
var polygon2=reslut.content.geoJsonPolygon;
var points=[]
console.log('polygon1 '+polygon1)
console.log('polygon.points '+JSON.stringify(polygon2.points))
console.log('polygon.points.length '+polygon2.points.length)
polygon2.points.forEach(element=>{
var temp={}
temp['longitude']=element.x;
temp['latitude']=element.y;
points.push(temp);
});
console.log(points)
return {//返回 polygons所需要的数据格式
points:points,
strokeWidth:2,
strokeColor:"#FF000010",
fillColor:"#FF000020"
};
});
// 修改data里面的polygons
that.setData({
lat: lat,
log: log,
polygons:spolygons
});
}
})
}
效果如下: