点击事件的坐标

Question

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

我有一个使用@asymmetrik/ngx-leaflet-tutorial-ngcli的 Angular.io (v5) 项目

现在我想获取我在地图上单击的点的坐标。根据问题 #51 获取点击坐标？，我补充说：

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？

我的项目正在使用：

"@angular/cli": "1.4.7",
"@asymmetrik/ngx-leaflet": "^2.5.1",
"@types/leaflet": "^1.2.0",
"leaflet": "^1.2 .0",

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);
});