微信小程序实例：map组件markers属性动态初始化

本文是转载内容，原文地址：http://blog.csdn.net/eadio/article/details/53744310

前瞻：

今天在写小程序详情页时候遇到一个问题，map组件的markers属性是通过异步请求到数据后设置的，结果就导致了微信底层渲染出错。但是如果我先在data初始化markers变量，每次小程序都不能正常渲染都是初始化的北京的数据。然后写了如下测试：

//test.js
Page({  
  data:{  
    map:{  
      lat: 0,  
      lng: 0,  
      markers: [],  
      hasMarkers: false//解决方案  
    }  
  },  
  onLoad: function(options){  
    var that=this;  
    wx.getLocation({  
      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标  
      success: function (res) {  
        // success  
        wx.request({  
          url: 'https://xxx.com/detail.htm?vid=3&latlng=' + res.latitude + ',' + res.longitude,  
          data: {},  
          method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
          // header: {}, // 设置请求的 header  
          success: function (res) {  
            // success  
            that.setData({  
              'map.lat': res.data.data.lat,  
              'map.lng': res.data.data.lng,  
              'map.markers': [{  
                latitude: res.data.data.lat,  
                longitude: res.data.data.lng,  
                name: res.data.data.title,  
                desc: res.data.data.address  
              }],  
              'map.hasMarkers': true//解决方案  
            });  
  
  
            console.log(that.data.map.markers);  
          }  
        })  
      }  
    })  
  }  
});  

//test.wxml
  
{{map.lat}}--{{map.lng}}--{{map.markers[0].name}}--{{map.markers[0].desc}}  
  
  

• 测试一：data里面没有初始化map变量

  
  
  

• 测试二：初始化map变量，并在wxml把map数据都打印出来

  
  
  

为什么会这样呢？？各种测试，最后发现只要不是经过远程请求在来设置map值就不会出问题。
后来经大神网友提点，由于异步设置值的过程，组件已经渲染。但是map变量没有预定义是undefined状态，map初始化拿不到数据直接报错了，而异步过来又变成动态更新导致了wxml需要重新渲染map组件的情况导致的。因为官方文档有提到：
地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。 标记点markers只能在初始化的时候设置，不支持动态更新。
只能初始化一次，因此导致每次都是显示的初始化信息。
然后，网友给出的解决方案完美解决了这个问题：

wx:if会渲染一下组件，那我们按照这个思路给他加个if就行了

默认map是false,就是加载时不渲染map组件，等ajax回来后把map设置为true，这样就动态渲染成你要的地址了

最后解决如下【再次感谢大神网友的鼎力相助】：