The first is to create a map class in the background
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;
}
The following is a small program.
First onload gets the user location wx.getLocation
wx.getLocation({
type: 'gcj02',
success: function (res) {
After success, wx.request requests the backend
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]);
, The backend returns the json format according to the user location as follows
{id:1,iconPath:1.jpg,latitude:39,longitude,116,width:50,height:50}
Then get the json length, that is, return a few pieces of data
res.data.length
Then the for loop stores the value in markers
The complete structure is as follows
markers: [{
iconPath: "/image/2.jpg",
id: 0,
latitude: latitude,
longitude: longitude,
width: 50,
height: 50
}, ]
The following [mark] is used to indicate the markers in the map
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 }});
}
Here reference is made to several articles
micro letter applet setData pit
micro-channel small program loop to the object assignment
micro-channel small program loop assignment pit (rpm)
micro-channel applet setData the key name key variables used
small program variables stitching and dynamic setting setData
Below is felt Good collection of the magical effect of WeChat
applet json parsing
json.stringify(), the difference between json.stringify() and json.parse()
Finally, the complete code
// 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 () {
}
})