微信小程序将后台数据传给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 () {

  }
})