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

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

重点：这里拿区域举例：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里面的polygonsthat.setData({lat: lat,log: log,polygons:spolygons});}})
}

效果如下：

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

微信小程序地图开发入门(一)
如何获取AppID, 如何创建项目, 点击这里查看官网详情根目录下 app.js, app.json, app.wxss解释 2.1 app.js 小程序的逻辑 2.2 app.json小程序的公共 ...
没学后端也能开发小程序——微信小程序云开发的介绍知识
微信小程序云开发的介绍知识云开发模式产品经理-->前端开发-->上线云开发传统开发效率只关心业务逻辑,效率高需要关注非业务逻辑,效率低成本按需付费,有免费额度前期需要预 ...
【小程序云开发】不用后端也能构建完整的微信小程序
文章目录什么是微信小程序云函数云数据库 HTTP 云函数定时触发云函数总结写在最后什么是微信小程序云函数微信小程序云函数是通过微信小程序云开发提供的一种服务器端代码,用于在小程序中进行服 ...
最新开源微信小程序一键开发平台源码支持15大功能模块+完整前后端+搭建教程
分享一个开源微信小程序一键开发综合平台源码,系统支持15大小程序功能模块,涉及各行各业,含完整前后端+详细搭建部署教程. 系统特色功能一览: 1.全新重构升级功能后端文件和前端文件: 2.整套源码已经 ...
【系】微信小程序云开发实战坚果商城-前后端交互之订单实现
第 4-7 课:前后端交互之订单实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
微信小程序中开发使用腾讯地图定位
在最近的微信小程序中开发使用到腾讯地图定位,开发记录一下相关的情况.首先地图使用的是腾讯地图接口,https://lbs.qq.com/ 上去注册,注册了后去创建APPID和应用名; 注意创建了应用后 ...
【系】微信小程序云开发实战坚果商城-前后端交互之主题实现
第 4-4 课:前后端交互之主题实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
java uniapp旅游微信小程序的开发hbuilderx
旅游行业,随着经济的快速发展,呈现出一片欣欣向荣的画面,特别是在这两年的发展之中,各行各业都在互联网的快速发展中展现出了运用技术手段来解决传统的线下宣传的弊端,这也是必然的趋势.虽然今年因新冠病毒疫情 ...
❤️微信小程序云开发教程合集（视频+图文）免费❤️
一.视频版微信小程序云开发视频教程上线啦二.图文版 (1)预备知识 1. 怎么注册开通个人微信小程序 2. 微信小程序云开发教程-互联网软件的运作模式 3.微信小程序云开发教程-云开发对微信小程序 ...
《微信小程序商城开发实战》笔者的新书，欢迎各位粉丝上京东购买
编辑推荐在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性牢牢地占据着移动App应用的头把交椅之位,据相关统计,微信月活跃用户已达10亿之多,且占据着中国用户30%以上的应用时间, ...

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

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

最新文章

热门文章