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

24 篇文章 0 订阅
21 篇文章 5 订阅

        今天在写小程序详情页时候遇到一个问题,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::

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


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


===============2018-04-16分割线================

目前已经没有发现该问题,而且最新版的小程序map组件已经完全不同。需要的文本内容需要自定义。详情请查看官方文档

  • 17
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值