首先是后台创建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 () {}
})
















