Ionic/Leaflet.js：如何在L.Draw.Event.CREATED事件中调用函数？

云原生阿岚

2026-5-28

解决Leaflet Draw CREATE事件回调中调用父作用域方法的问题

你遇到的确实是JavaScript作用域绑定的问题——普通函数作为回调时，this的指向会变成触发事件的对象（这里是Leaflet的map实例），而不是你的组件实例，所以找不到myOtherMethod。下面给你三种常用的解决方案：

方案1：使用箭头函数（最简洁推荐）

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是你的组件实例），直接替换回调函数即可：

drawMap() {
  this.myMap = L.map('map', { crs: L.CRS.Simple });
  ...
  // 把普通函数改成箭头函数
  this.myMap.on(L.Draw.Event.CREATED, (e) => {
    let type = e.layerType;
    let layer = e.layer;
    this.myOtherMethod(); // 现在能正常调用了！
    drawLayer.addLayer(layer);
  });
}
myOtherMethod() {
  console.log('hello world!');
}

方案2：提前保存`this`的引用

在回调函数外把组件实例的this存到一个变量（比如self/that），然后在回调里用这个变量调用方法：

drawMap() {
  this.myMap = L.map('map', { crs: L.CRS.Simple });
  ...
  const self = this; // 保存组件实例的this
  this.myMap.on(L.Draw.Event.CREATED, function (e) {
    let type = e.layerType;
    let layer = e.layer;
    self.myOtherMethod(); // 使用保存的self调用方法
    drawLayer.addLayer(layer);
  });
}
myOtherMethod() {
  console.log('hello world!');
}

方案3：用`bind()`绑定`this`

通过bind()方法把回调函数的this强制绑定到组件实例：

drawMap() {
  this.myMap = L.map('map', { crs: L.CRS.Simple });
  ...
  this.myMap.on(L.Draw.Event.CREATED, function (e) {
    let type = e.layerType;
    let layer = e.layer;
    this.myOtherMethod(); // 现在this指向组件实例
    drawLayer.addLayer(layer);
  }.bind(this)); // 绑定this到组件实例
}
myOtherMethod() {
  console.log('hello world!');
}