报错基本上都是因为this指向问题,基本上就是 function 和 () => 之间的问题,进行这俩的替换基本上都可以解决。我碰到了此问题,因为this指向了方法,而不是vue,报错代码:

mounted () {
    lazyAMapApiLoaderInstance.load().then(() => {
      // your code ...
      this.map = new AMap.Map("amapContainer", {
        center: [121.59996, 31.197646],
        zoom: this.zoom
      });

      this.map.on('click', function (e) {
        const data = getLngLat(e)
        this.$emit("lnglat", data)
      });
    });
  },

有两种解决方式:

第一种方式,对象中转:

ounted () {
    const _this = this
    lazyAMapApiLoaderInstance.load().then(() => {
      // your code ...
      this.map = new AMap.Map("amapContainer", {
        center: [121.59996, 31.197646],
        zoom: this.zoom
      });

      this.map.on('click', function (e) {
        const data = getLngLat(e)
        _this.$emit("lnglat", data)
      });
    });
  },

第二种方式,使用箭头函数:

mounted () {
    lazyAMapApiLoaderInstance.load().then(() => {
      // your code ...
      this.map = new AMap.Map("amapContainer", {
        center: [121.59996, 31.197646],
        zoom: this.zoom
      });

      this.map.on('click', (e) => {
        const data = getLngLat(e)
        this.$emit("lnglat", data)
      });
    });
  }

 

Logo

前往低代码交流专区

更多推荐