微信小程序地图开发电子围栏与后端联调

最近在开发微信小程序中，无意中遇到一个问题，就是地图显示电子围栏，但是后端返回的值不满足它小程序给的组件的要求的数据，这时候需要迭代微信请求所返回的数据，找出需要的数据。

重点：这里拿区域举例：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
      });
    }
  })
}

效果如下：