怎么解决微信小程序map层级的问题

　　设置小程序详情页的时候可能会遇到微信小程序map层级的问题，具体问题的内容小编会为大家讲述一下，看看大家是不是也遇到过，关注微信小程序商店获取解决办法。

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

　　test.js：：

　　[plain] view plain copy

　　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: 'xxx/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：：

　　[plain] view plain copy

　　{{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，这样就动态渲染成你要的地址了

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

　　以上的关于微信小程序map层级的问题大家在开发小程序的过程中是不是也都遇到过呢?其实解决办法挺简单的，大家仔细看看资料就明白了。

　　微信小程序遮罩层开发实例

　　微信小程序弹出层的开发和使用

　　微信小程序逻辑层怎么开发和使用