在组件中添加传单的map.on('click', ...)会导致参数列表后出现语法错误：缺少 )

Question

我在使用Leaflet和Svelte时遇到了一些奇怪的错误，我不确定这是否是我的错误。

我有一个封装我的 Leaflet 地图的组件，位于 Svelte 的

$lib

目录中。每当我尝试将点击绑定到地图（以便我可以返回事件）时，我都会收到以下控制台错误（仅在网页上）

SyntaxError: missing ) after argument list in app.js:16:40

这是一个我无权访问的文件，只能假设它是由 Svelte 在编译过程中生成的。

我尝试在使用

创建地图后绑定它

$: if(map){
  if(bounds){
    map.fitBounds(bounds);
  }else if(view && zoom){
    map.setView(view, zoom);
  }
  map.on('click', (/** @type {any} */e) => console.log(e))
}

以及地图创建

onMount(() => {
  map = L.map(mapElement)
    .on('zoom', (/** @type {any} */ e) => dispatch('zoom', e))
    .on('popupopen', async (/** @type {any} */ e) => {
       await tick();
       e.popup.update();
    })
    .on('click', (/** @type {any} */e) => console.log(e));

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap'
  }).addTo(map);
});

值得注意的是其他

.on

的工作。
但是，上述两次尝试都会导致页面无法加载、内部服务器错误 (500) 和上面显示的错误代码。

有谁知道为什么会这样吗？

感谢帮助，谢谢

Answer 1

所以我想通了。

我无法解释为什么它可以工作，但是将

.on('click', ..)

移动到

.on('zoom', ..)

和其他绑定上方可以使其按预期工作

onMount(() => {
        map = L.map(mapElement)
            .on('click', function(/** @type {any} */ e){
                position = e.latlng;
                
            })
            .on('zoom', (/** @type {any} */ e) => dispatch('zoom', e))
            .on('popupopen', async (/** @type {any} */ e) => {
                await tick();
                e.popup.update();
            }); 
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap'
        }).addTo(map);
    });

如果有人知道这是为什么，我希望得到解释，但希望这个解决方案能够帮助人们将来:)