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

最新推荐文章于 2025-06-05 14:09:31 发布

草灯

最新推荐文章于 2025-06-05 14:09:31 发布

阅读量5.9w

点赞数 17

CC 4.0 BY-SA版权

分类专栏： web前端微信开发小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/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': [{