微信小程序实例:map组件markers属性动态初始化
2016-12-19 18:04
627 查看
今天在写小程序详情页时候遇到一个问题,map组件的markers属性是通过异步请求到数据后设置的,结果就导致了微信底层渲染出错。但是如果我先在data初始化markers变量,每次小程序都不能正常渲染都是初始化的北京的数据。然后写了如下测试:
test.js::
test.wxml::
测试一:data里面没有初始化map变量
测试二:初始化map变量,并在wxml把map数据都打印出来
为什么会这样呢??各种测试,最后发现只要不是经过远程请求在来设置map值就不会出问题。
后来经大神网友提点,由于异步设置值的过程,组件已经渲染。但是map变量没有预定义是undefined状态,map初始化拿不到数据直接报错了,而异步过来又变成动态更新导致了wxml需要重新渲染map组件的情况导致的。因为官方文档有提到:
地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。 标记点markers只能在初始化的时候设置,不支持动态更新。
只能初始化一次,因此导致每次都是显示的初始化信息。
然后,网友给出的解决方案完美解决了这个问题:
wx:if会渲染一下组件,那我们按照这个思路给他加个if就行了
<map markers="{{markers}}" style="width: 375px; height: 200px;" wx:if="{{map}}"></map>
默认map是false,就是加载时不渲染map组件,等ajax回来后把map设置为true,这样就动态渲染成你要的地址了
最后解决如下【再次感谢大神网友的鼎力相助】:
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::
<view style="height: 100rpx;"> {{map.lat}}--{{map.lng}}--{{map.markers[0].name}}--{{map.markers[0].desc}} </view> <map latitude="{{map.lat}}" longitude="{{map.lng}}" markers="{{map.markers}}"></map>
测试一:data里面没有初始化map变量
测试二:初始化map变量,并在wxml把map数据都打印出来
为什么会这样呢??各种测试,最后发现只要不是经过远程请求在来设置map值就不会出问题。
后来经大神网友提点,由于异步设置值的过程,组件已经渲染。但是map变量没有预定义是undefined状态,map初始化拿不到数据直接报错了,而异步过来又变成动态更新导致了wxml需要重新渲染map组件的情况导致的。因为官方文档有提到:
地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。 标记点markers只能在初始化的时候设置,不支持动态更新。
只能初始化一次,因此导致每次都是显示的初始化信息。
然后,网友给出的解决方案完美解决了这个问题:
wx:if会渲染一下组件,那我们按照这个思路给他加个if就行了
<map markers="{{markers}}" style="width: 375px; height: 200px;" wx:if="{{map}}"></map>
默认map是false,就是加载时不渲染map组件,等ajax回来后把map设置为true,这样就动态渲染成你要的地址了
最后解决如下【再次感谢大神网友的鼎力相助】:
相关文章推荐
- 使用TypeScript开发微信小程序的方法
- 微信小程序 闭包写法详细介绍
- 微信小程序 toast 详解及实例代码
- 微信小程序 navigation API实例详解
- 微信小程序(十二)text组件详细介绍
- 微信小程序 (十八)picker组件详细介绍
- 微信小程序 保留小数(toFixed)详细介绍
- 微信小程序 location API接口详解及实例代码
- 微信小程序 (七)数据绑定详细介绍
- 微信小程序 video组件详解
- 微信小程序 icon组件详细及实例代码
- 微信小程序 教程之注册页面
- 微信小程序 progress组件详解及实例代码
- 微信小程序 框架详解及实例应用
- 微信小程序 配置文件详细介绍
- 微信小程序 五星评分(包括半颗星评分)实例代码
- 微信小程序 教程之引用
- 微信小程序 教程之注册程序
- 微信小程序 http请求详细介绍