Leaflet-标记点击事件工作正常，但回调函数中未定义类的方法

Posted 2023-03-16

【中文标题】Leaflet-标记点击事件工作正常，但回调函数中未定义类的方法

【英文标题】：Leaflet- marker click event works fine but methods of the class are undefined in the callback function

【发布时间】：2018-06-18 15:29:54

【问题描述】：

我正在使用以下代码将回调函数添加到 click 事件的一些传单标记（我不知道先验的数字）：

newArray.forEach(p => 
  let marker = L.marker(latLng).on('click', this.markerClick).addTo(newMap)
  marker.bindPopup(content)
  marker.addTo(newMap)
  marker.openPopup()
)

在类中有一个函数markerClick 这样做：

markerClick(e) 
  console.log("Inside marker click " + e.latlng.lat + "  " + e.latlng.lng)
  this.displayError("You clicked on the marker")

console.log 正在正确打印标记的lat 和lng 的值，但是在调用displayError 时会抛出运行时错误，提示：

this.displayError 不是函数

这是一个在类中声明的函数，我用来根据我的需要显示带有自定义消息的 toast。这是代码：

displayError(messageErr: string) 
  let toast = this.toastCtrl.create(
    message: messageErr,
    duration: 3000,
    position: 'top'
  );
  toast.present();

为什么说那不是函数？

编辑：不仅仅是displayError，类的每个函数都会给出这个消息。

【参考方案1】：

这是一个经典的 javascript 错误。

this 在 JavaScript 中不一定引用您的类实例对象。它是函数被调用时的上下文。

您可以使用bind 强制此上下文，并且在许多库中您也可以轻松强制它。在这种情况下，使用 Leaflet，您可以在附加事件侦听器时将第三个参数传递给 on：

// Force current `this` to be the context when `this.markerClick` is called
marker.on('click', this.markerClick, this);

bind 会是：

marker.on('click', this.markerClick.bind(this));

还有arrow function的解决方案，它使用this的上下文/值箭头函数在哪里定义，而不是在哪里调用：

marker.on('click', (event) => this.markerClick(event));