协调clickevent

Question

我一般都是@ asymmetrik / ngx-leaflet和Angular的新手，所以这可能只是一个新手问题......

我有一个使用@asymmetrik/ngx-leaflet-tutorial-ngcli

的Angular.io（v5）项目

现在我想得到我在地图上点击的点的坐标。根据{{​​3}}，我补充说：

map.on('click', () => { console.log(e.latlng); });

为：

onMapReady(map: Map) {
    map.fitBounds(this.route.getBounds(), {
        padding: point(24, 24),
        maxZoom: 12,
        animate: true
    });
    map.on('click', () => { console.log(e.latlng); });
}

这给我一个运行时错误： Cannot find name 'e'.

哪种对我有意义。所以，我将代码更改为：

map.on('click', (e) => { console.log(e.latlng); });

但这也给我一个错误：Property 'latlng' does not exist on type 'LeafletEvent'

当我把e放到控制台console.log(e)时，我可以看到latlng-Property存在... 为什么我无法使用e.latlng访问坐标？

我的项目正在使用：

＆＃34; @ angular / cli＆＃34;：＆＃34; 1.4.7＆＃34;，
＆＃34; @ asymmetrik / ngx-leaflet＆＃34;：＆＃34; ^ 2.5.1＆＃34;，
＆＃34; @ types / leaflet＆＃34;：＆＃34; ^ 1.2.0＆＃34;，
＆＃34;传单＆＃34;：＆＃34; ^ 1.2.0＆＃34;，

Answer 1

尝试将其“投射”为LeafletMouseEvent：

map.on('click', <LeafletMouseEvent>(e) => { console.log(e.latlng) });

Answer 2

编译器推断事件类型为LeafletEvent，它没有latlng属性。这就是你收到这个错误的原因。

Leaflet文档表明此事件实际上是LeafletMouseEvent类型，它扩展了LeafletEvent。因此，您可以转换事件以获取对LeafletMouseEvent属性的访问权限（如下所示：

map.on('click', (<LeafletMouseEvent>e) => {
    console.log(e.latlng);
});