微信小程序将后台数据传给map中的多个markers 用for循环赋值
首先是后台创建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.longitude
longitude: 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 zhi
var 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.longitude
longitude: 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.88768149245786
latitude: 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 () {
}
})