点击事件坐标

Question

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

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

现在我想获取我在地图上点击的那个点的坐标。根据Issue #51 get coordinates on click?，我添加了这个：

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-属性存在... 为什么我无法使用 e.latlng 访问坐标？

我的项目正在使用：

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

Answer 1

尝试"cast"它作为LeafletMouseEvent:

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

Answer 2

编译器推断事件类型为 LeafletEvent，没有经纬度属性。这就是您收到此错误的原因。

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

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

点击事件坐标

Coordinates on clickevent

leaflet

typescript

angular

ngx-leaflet