Angular使用Mapbox实现可拖拽点时onMove函数报canvas.style未定义错误

问题核心原因 #

你遇到的报错本质是onMove函数的this指向错误：Mapbox的事件回调默认将this绑定到Map实例本身，而非你的Angular组件实例，所以函数内部访问this.canvas得到undefined，才会触发读取style属性失败的报错。
你在mouseenter回调中能正常访问this.canvas，是因为你使用了箭头函数，箭头函数的this继承自外层的组件作用域，指向正确。

解决方案 #

方案1：将onMove定义为箭头函数（最常用） #

直接修改onMove的声明方式，把普通函数改成箭头函数，固定this指向组件实例：

// 把原来的 onMove(e: any) { 改成箭头函数写法
onMove = (e: any) => {
  const coords = e.lngLat;
  console.log('coords are ' + coords);

  // 这里的this现在指向组件实例，能正常拿到canvas
  this.canvas.style.cursor = 'grabbing'; 

  this.geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
  const source: mapboxgl.GeoJSONSource = this.map.getSource(
    'point',
  ) as mapboxgl.GeoJSONSource;
  source.setData(this.geojson);
}

方案2：绑定事件时显式绑定this #

如果不想改函数声明，也可以在给Mapbox绑定mousemove事件的时候，用bind绑定组件实例的this，或者用箭头函数包裹：

// 写法1：用bind绑定
this.map.on('mousemove', this.onMove.bind(this));

// 写法2：用箭头函数包裹回调
this.map.on('mousemove', (e) => this.onMove(e));

补充注意 #

记得在Angular组件的ngOnDestroy生命周期钩子中解绑所有绑定到Map实例的事件，避免内存泄漏：

ngOnDestroy() {
  if (this.map) {
    this.map.off('mousemove', this.onMove);
    // 其他绑定的事件比如mouseenter、mouseup之类的也要一起解绑
  }
}

内容的提问来源于stack exchange，提问作者user15334378