微信小程序map作为子组件时定位，移动等功能报错

前言：

        在使用小程序的腾讯地图时发现一个问题，map这个组件作为单独一个页面的时候是没有问题的，但是，如果作为子组件的时候，效果就出不来，而且所有的方法，比如定位，移动等都会报错失效。

目录：

失败代码（单独组件是成功代码，作为子组件失败）：

正确代码：

对比不同：使用wx.createMapContext增加了额外的参数this

官方解释：入口

相关api文档：

---

失败代码（单独组件是成功代码，作为子组件失败）：

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let self =this;
    self.mapCtx = wx.createMapContext('myMap')
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'BR7BZ-GVEKW-5UDRM-RIFXT-LXCQ5-IYBHU'
    });
    wx.showLoading({
      title: '加载中'
    });
    //定位
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        //console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        //你地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            //console.log(res)
            self.setData({
              latitude: latitude,
              longitude: longitude,
              currentRegion: res.result.address_component,
              keyword: self.data.defaultKeyword
            })
            // 调用接口
            self.nearby_search();
          },
        });
      },
      fail(err) {
        //console.log(err)
        wx.hideLoading({});
        wx.showToast({
          title: '定位失败',
          icon: 'none',
          duration: 1500
        })
        setTimeout(function () {
          wx.navigateBack({
            delta: 1
          })
        }, 1500)
      }
    })



  },
  //监听拖动地图，拖动结束根据中心点更新页面
  mapChange: function (e) {
    let self = this;
    if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')){
      self.mapCtx.getCenterLocation({
        success: function (res) {
          //console.log(res)
          self.setData({
            nearList:[],
            latitude: res.latitude,
            longitude: res.longitude,
          })
          self.nearby_search();
        }
      })
    }

  },

正确代码：

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let self =this;
    self.mapCtx = wx.createMapContext('myMap',this)
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'BR7BZ-GVEKW-5UDRM-RIFXT-LXCQ5-IYBHU'
    });
    wx.showLoading({
      title: '加载中'
    });
    //定位
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        //console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        //你地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            //console.log(res)
            self.setData({
              latitude: latitude,
              longitude: longitude,
              currentRegion: res.result.address_component,
              keyword: self.data.defaultKeyword
            })
            // 调用接口
            self.nearby_search();
          },
        });
      },
      fail(err) {
        //console.log(err)
        wx.hideLoading({});
        wx.showToast({
          title: '定位失败',
          icon: 'none',
          duration: 1500
        })
        setTimeout(function () {
          wx.navigateBack({
            delta: 1
          })
        }, 1500)
      }
    })



  },
  //监听拖动地图，拖动结束根据中心点更新页面
  mapChange: function (e) {
    let self = this;
    if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')){
      self.mapCtx.getCenterLocation({
        success: function (res) {
          //console.log(res)
          self.setData({
            nearList:[],
            latitude: res.latitude,
            longitude: res.longitude,
          })
          self.nearby_search();
        }
      })
    }

  },

对比不同：使用wx.createMapContext增加了额外的参数this

 self.mapCtx = wx.createMapContext('myMap',this)

官方解释：入口

相关api文档：

MapContext wx.createMapContext(string mapId, Object this)

创建 map 上下文 MapContext 对象。

参数

string mapId

map 组件的 id

Object this

在自定义组件下，当前组件实例的this，以操作组件内 map 组件

返回值

MapContext