Svelte组件中添加Leaflet map.on('click')触发语法错误求助

开发者阿泽

2026-7-2

问题分析与解决方案

这个报错大概率是Svelte编译器对箭头函数参数中的JSDoc类型注释处理存在异常导致的——虽然其他事件（如zoom、popupopen）的类似写法能正常工作，但click事件的字符串可能触发了编译器的特殊逻辑，或者参数注释的位置引发了语法解析错误。

解决步骤：

移除参数中的JSDoc注释
先简化事件回调的写法，去掉参数上的类型注释，测试是否能正常编译：

// 响应式语句中的写法
$: if(map){
  if(bounds){
    map.fitBounds(bounds);
  }else if(view && zoom){
    map.setView(view, zoom);
  }
  map.on('click', (e) => console.log(e))
}

// onMount中的链式写法
map = L.map(mapElement)
  .on('zoom', (e) => dispatch('zoom', e))
  .on('popupopen', async (e) => {
     await tick();
     e.popup.update();
  })
  .on('click', (e) => console.log(e));

改用函数声明替代箭头函数
如果移除注释后仍有问题，尝试用普通函数声明代替箭头函数：
```
map.on('click', function(e) {
  console.log(e);
});
```
调整类型注释位置（如需保留类型）
若需要类型提示，把JSDoc注释移到函数内部：
```
map.on('click', (e) => {
  /** @type {any} */
  const event = e;
  console.log(event);
});
```
更新Svelte版本
检查当前Svelte版本，若使用的是较旧版本，升级到最新稳定版——旧版本编译器可能存在对特定事件名+箭头函数注释的解析bug。