如何在ES6函数内声明事件与参数？Mapbox点击事件报错求助

问题 #

当前我在地图上绑定点击事件的代码可以正常运行：

map.on("click",(event)=>addMarker(event,parameter))

但我希望把触发逻辑整合到addMarker函数内部，不需要在外部用箭头函数传递参数，直接让点击地图时触发addMarker相关逻辑。尝试了以下写法但报错：
绑定代码：

map.on("click",addMarker(map))

对应的addMarker函数：

const addMarker = (event) => (parameter) =>{
  new mapboxgl.addMarker({}).setLngLat(coords).addTo(parameter)
}

报错信息："Cannot read properties of undefined (reading:"lng")"，请问正确的addMarker函数语法是什么？

解决方案 #

错误原因分析 #

1. 柯里化函数参数顺序倒置：你定义的addMarker先接收event再返回接收parameter的函数，但调用addMarker(map)时，map被当成了event参数传入，导致后续读取event.lng时找不到对应属性。
2. Marker构造API错误：正确的Mapbox Marker构造函数是mapboxgl.Marker()，而非mapboxgl.addMarker()。
3. 未正确获取点击坐标：需要从点击事件对象event的lngLat属性读取经纬度，而非未定义的coords变量。

正确写法 #

方式一：使用柯里化函数（推荐）

调整柯里化函数的参数顺序，先接收地图实例，再返回接收点击事件的回调函数：

const addMarker = (mapInstance) => (event) => {
  // 从点击事件中获取经纬度坐标
  const coords = event.lngLat;
  // 创建Marker并添加到地图
  new mapboxgl.Marker({}).setLngLat(coords).addTo(mapInstance);
};

绑定事件时，先传入地图实例，得到可接收点击事件的回调函数：

map.on("click", addMarker(map));

方式二：使用bind绑定参数

如果不想用柯里化，也可以用bind提前绑定地图参数：

const addMarker = (mapInstance, event) => {
  const coords = event.lngLat;
  new mapboxgl.Marker({}).setLngLat(coords).addTo(mapInstance);
};

绑定事件时，用bind把地图实例作为第一个参数传入（null用于绑定this指向，此处不需要用到）：

map.on("click", addMarker.bind(null, map));

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