微信小程序将后台数据传给map中的多个markers 用for循环赋值

article/2025/11/6 3:46:09

在这里插入图片描述
首先是后台创建map类

package bean;public class mapbean {
private String iconPath;
public String getIconPath() {return iconPath;
}public void setIconPath(String iconPath) {this.iconPath = iconPath;
}public int getId() {return id;
}public void setId(int id) {this.id = id;
}public double getLatitude() {return latitude;
}public void setLatitude(double latitude) {this.latitude = latitude;
}public double getLongitude() {return longitude;
}public void setLongitude(double longitude) {this.longitude = longitude;
}public int getWidth() {return width;
}public void setWidth(int width) {this.width = width;
}public int getHeight() {return height;
}public void setHeight(int height) {this.height = height;
}private int id;
private double latitude;
private double longitude;
private int width;private int height;
}

下面是小程序
首先onload获取用户位置wx.getLocation

wx.getLocation({type: 'gcj02',success: function (res) {

success后wx.request请求后端

  console.log(res);var latitude = res.latitude;//getApp().globalData.latitude = res.latitude;var longitude = res.longitude;that.setData({latitude: latitude,longitude: longitude,//buyong在上面的data中初始化变量,在这set})wx.request({url: 'http://127.0.0.1:9090/xcxmvc/map6/dl',// 'https://www.fuhufuhu.com/xcxmvc/nr/dl',method: 'get',data: {latitude: that.data.latitude,//longitude:longitude,//longitude: wei.longitudelongitude: that.data.longitude,//  jici: that.data.jici},header: {'content-type': 'application/json' // 默认值// 'Content-Type': 'application/x-www-form-urlencoded'},success: function (res) {console.log(res.data[0]);

,后端根据用户位置返回json格式如下

{id:1,iconPath:1.jpg,latitude:39,longitude,116,width:50,height:50}

然后获取json长度,也就是返回了几条数据

res.data.length

然后for循环将值存进markers

完整结构如下

markers: [{iconPath: "/image/2.jpg",id: 0,latitude: latitude,longitude: longitude,width: 50,height: 50}, ]

下面的【mark】是用来表示map中markers

for (var i = 0; i < res.data.length; i++) {// res.data; //   console.log(res.data[i]); var param6 = [];let mark = "markers[" + i + "]";let id = "markers[" + i + "].id";let iconPath = "markers[" + i + "].iconPath";let latitude = "markers[" + i + "].latitude";let longitude = "markers[" + i + "].longitude";let width = "markers[" + i + "].width";let height = "markers[" + i + "].height";that.setData({[mark]:{ id: res.data[i].id, iconPath: res.data[i].iconPath, latitude: res.data[i].latitude, longitude: res.data[i].longitude, width: res.data[i].width, height: res.data[i].height }});}

这里参考了几篇文章
微信小程序 setData 的坑
微信小程序循环给对象赋值
微信小程序循环赋值坑(转)
微信小程序setData中键名key中使用变量
小程序变量拼接和动态设置setData
下面是觉得不错收藏下
微信小程序json解析
json.stringify()的妙用,json.stringify()与json.parse()的区别

最后是完整代码

// map/map.js
Page({/*** 页面的初始数据*/data: {markers: [{/**iconPath: "/image/fe6e546034a85edfa278dd3546540923dc54758a.jpg",id: 0,latitude: 39.92855,longitude: 116.41637,width: 50,height: 50*/}],hou:false},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//
/gei map fu zhivar that=this;wx.getLocation({type: 'gcj02',success: function (res) {console.log(res);var latitude = res.latitude;//getApp().globalData.latitude = res.latitude;var longitude = res.longitude;that.setData({latitude: latitude,longitude: longitude,//buyong在上面的data中初始化变量,在这set})wx.request({url: 'http://127.0.0.1:9090/xcxmvc/map6/dl',// 'https://www.fuhufuhu.com/xcxmvc/nr/dl',method: 'get',data: {latitude: that.data.latitude,//longitude:longitude,//longitude: wei.longitudelongitude: that.data.longitude,//  jici: that.data.jici},header: {'content-type': 'application/json' // 默认值// 'Content-Type': 'application/x-www-form-urlencoded'},success: function (res) {console.log(res.data[0]);var io = {}; for (var i = 0; i < res.data.length; i++) {// res.data; //   console.log(res.data[i]); var param6 = [];let mark = "markers[" + i + "]";let id = "markers[" + i + "].id";let iconPath = "markers[" + i + "].iconPath";let latitude = "markers[" + i + "].latitude";let longitude = "markers[" + i + "].longitude";let width = "markers[" + i + "].width";let height = "markers[" + i + "].height";that.setData({[mark]:{ id: res.data[i].id, iconPath: res.data[i].iconPath, latitude: res.data[i].latitude, longitude: res.data[i].longitude, width: res.data[i].width, height: res.data[i].height }});//  param6.concat([ [] ]);// console.log(JSON.stringify(param6)+"l");/*  var string ="markers["+i+"].iconPath";var id = "markers[" + i + "].id";var latitude = "markers[" + i + "].latitude";var longitude = "markers[" + i + "].longitude";var width = "markers[" + i + "].width";var height = "markers[" + i + "].height";that.setData({ string:res.data[i].iconPath,id:res.data[i].id,latitude:res.data[i].latitude,longitude:res.data[i].longitude,width:res.data[i].width,height:res.data[i].height});*/}that.setData({ nr6: res.data ,hou: true});console.log(io);//测试//var json=JSON.parse(res.data);//console.log(res.data[0].id);},fail: function (res) {console.log(".....fail.....");}})/*   markers: [{iconPath: "/image/2.jpg",id: 0,latitude: latitude,longitude: longitude,width: 50,height: 50}, {iconPath: "/image/6.jpeg",id: 0, //116.4379027425444,39.88768149245786latitude: 39.887886,longitude: 116.437805,width: 50,height: 50}],hou:true})//console.log(latitude);//弹框}*/}  })},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

http://chatgpt.dhexx.cn/article/5Sr0uouE.shtml

相关文章

java中Map循环的几种方式

package com.xhx.collection;import org.junit.Test;import java.util.HashMap; import java.util.Iterator; import java.util.Map;/*** xuhaixing* 2018/7/15 19:59**/ public class TestHashMapApp {/*** 循环的几种方式*/Testpublic void testHashMap1(){Map<String,Str…

微信小程序for循环的数据每项添加编辑和删除操作

1.代码中写出样式&#xff0c;展开的内容用if绑定上checkedall 2.点击小图标时候&#xff0c;图标进行变化&#xff08;展开收起&#xff09; 3.获取数据的方法 map&#xff08;转换&#xff09; 让每一项都绑定cheeckdall&#xff0c;各不牵扯。 简单来说&#xff1a;每一项…

微信小程序循环渲染canvas动态图表

需求&#xff1a;数据驱动图表渲染&#xff0c;先看效果图 我们知道&#xff0c;微信小程序中是没有图表组件的&#xff0c;使用echarts也会有很多问题&#xff0c;比如echarts的图表总是在屏幕最上层&#xff0c;也就是说&#xff0c;会在导航栏和菜单栏上方&#xff0c;这当…

使用map优化for循环

使用map优化for循环 微信公众号&#xff1a;前端程序猿之路关注可了解更多的前端知识&#xff0c;反馈问题或建议&#xff0c;请公众号留言。如果你觉得公众号内容对你有帮助&#xff0c;欢迎关注并转载 之前做的一个东西是点击一键升级按钮&#xff0c;修改后台返回的json数据…

通过js获取本地IP地址

通过js获取本地IP地址 最近在做pc项目&#xff0c;需要根据用户的IP地址定位城市。IP地址需要通过js获取&#xff1a; 网上有很多查询接口可以获取到IP&#xff0c;我这里用的是搜狐的&#xff1a; http://pv.sohu.com/cityjson?ieutf-8 在浏览器中&#xff0c;直接输入这…

利用JS获取用户当前ip地址

新浪的IP地址查询接口&#xff1a;http://int.dpool.sina.com.cn/iplookup/iplookup.php?formatjs &#xff08;默认为纯文本格式&#xff0c;根据format的参数定义&#xff0c;还可以返回JS、Json格式&#xff09;。新浪多地域测试方法&#xff1a; http://int.dpool.sina.c…

js获取用户浏览器信息和ip地址以及位置

获取浏览器信息代码 function userAgent () {let browserReg {Chrome: /Chrome/,IE: /MSIE/,Firefox: /Firefox/,Opera: /Presto/,Safari: /Version\/([\d.]).*Safari/,360: /360SE/,QQBrowswe: /QQ/,Edge: /Edg/};let deviceReg {iPhone: /iPhone/,iPad: /iPad/,Android: /A…

js方法获取本机IP

记录一次工作中需求 获取本机IP getUserIP(onNewIP) {// onNewIp - your listener function for new IPs//compatibility for firefox and chromevar myPeerConnection window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;var pc …

【2023亲测可用】JS 获取电脑本地IP 和 电脑网络IP(外网IP|公网IP)

1、了解&#xff1a;电脑本地的IP地址&#xff08;内网IP&#xff09;和电脑本机在网络上的IP地址&#xff08;外网IP|公网IP&#xff09; 在运行窗口输入“cmd”&#xff0c;在弹出的界面里输入“ipconfig/all”。弹出的数据中&#xff0c;IPv4地址&#xff0c;就是电脑本地的…

C语言中的,“与”,“或”,“异或”解释

int main() {int a2;//取二进制010int b4;//取二进制100//int ca && b;int ca&b;//”&“这个叫“与”&#xff0c;与门中的与&#xff0c;两个都为1的时候才为1&#xff0c; 0与任何数都为0&#xff0c;“|”这个叫“或”&#xff0c;两个都为0的时候才为0&…

C语言位运算符及作用:与、或、异或、取反、左移和右移

一、& 按位与 如果两个相应的二进制位都为1&#xff0c;则该位的结果值为1&#xff0c;否则为0 应用&#xff1a;&#xff08;1&#xff09;清零 若想对一个存储单元清零&#xff0c;即使其全部二进制位为0&#xff0c;只要找一个二进制数&#xff0c;其中各个位符合一下条…

C/运算符(按位与、按位或、按位异或)

本文主要介绍C语言中按位与、按位或、按位异或三个操作符的使用。 该三个操作符中的位&#xff0c;代表的是二进制位。 按位与&#xff1a;& 运算规则&#xff1a;只有两个数的二进制同时为1&#xff0c;结果才为1&#xff0c;否则为0。&#xff08;负数按补码形式参加按…

C | 妙用异或

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 啊我摔倒了..有没有人扶我起来学习.... 目录 前言一、问题的引出二、异或实现俩变量值的交换三、总结 前言 异或也叫半加运算&#xff0c;其运算法则相当于不带进位的二进制加法&#xff1a;二进制下用1表示真&#xff0c;0…

C语言中的异或 - 运算符^

最近在完成程序设计入门-C语言中需要计算异或&#xff0c;查阅了很多资料终于明白计算计算原理&#xff0c;记录一下方便以后查询。 流程 举例 为了方便理解&#xff0c;下面结合流程举例说明 a1 6 &#xff0c; 转化成二进制 a2 0110 b1 10&#xff0c;转化成二进制 b2 …

异或^操作符(C语言)

一、 简介 1. 异或^操作符&#xff1a;是一个位操作符&#xff0c;针对于二进制位&#xff08;比特位&#xff09;的操作。 2. 规则&#xff1a;两个数在同一个二进制位&#xff08;比特位&#xff09;&#xff0c;相同为0&#xff1b;不同为1。 3. 异或操作符的一些性质&…

c语言异或(c语言异或符号)

请帮我讲解一下C语言中的异或运算 首先&#xff0c;我们看一下异或的原理&#xff1a; a 3 ^ 5; 3的二进制是0011&#xff0c;5的二进制是0101。异或发现两者的不同之处&#xff0c;所以a最终为0110b(4)。 了解了异或的基本原理后&#xff0c;接下来看上述的代码。 a^b; 这一句…

C语言异或操作详解(小小异或,大大作用~)

文章目录 *按位异或"^"(1)何为“^”&#xff1a;①“^”的介绍 (2)用于算法的经典案例&#xff1a; 1.数组nums包含从0到n的所有整数&#xff0c;但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在O(n)时间内完成吗&#xff1f;&#xff08;源自leetcode面…

【c语言操作符系列1】^(异或操作符)讲解和多种例题详解

目录 一、^ 是什么&#xff08;^称为异或&#xff09; 二、^的规律(特点) 三、可利用^秒杀的常见例题&#xff08;重点&#xff09; 1、消失的数字 2、不一样的人生密码 3、交换两个数&#xff08;不能创建中间变量&#xff09; 4、找出只出现一个的两个数字 一、^ 是什么…

C语言中位运算异或“∧”的作用

前言&#xff1a; 为了方便查看博客&#xff0c;特意申请了一个公众号&#xff0c;附上二维码&#xff0c;有兴趣的朋友可以关注&#xff0c;和我一起讨论学习&#xff0c;一起享受技术&#xff0c;一起成长。 1.概念 异或运算符"∧"也称XOR运算符。它的规则是若参…