Angular 获取光标在传单地图坐标中的位置（角度6）

如果这个问题是另一个问题的重复，我很抱歉，但是我找不到任何解决我问题的方法

我有一个基于Angular 6和传单地图的应用程序（不是ngx leflet）。我需要在每次鼠标移动时获得光标在地图坐标中的位置。我想我可以在传单上使用处理事件，但我不知道如何将它与我的地图结合起来。下面是将其与自定义小部件一起使用的示例：

widget-options.model.ts

import { Map, ControlOptions } from 'leaflet';

export interface WidgetsOptions extends ControlOptions {
    map: Map;
}

app.component.ts

export class AppComponent {
    // ... init zoom and width 
    mapWidgetsOptions$: Observable<WidgetsOptions>;

    mapReady(map: Map) {
        this.mapWidgetsOptions$ = of<WidgetsOptions>({
            position: 'bottomleft',
            map: map
            // should I add here mousePosition ?
        });
    }
}

 export class MapWidgetsComponent extends Control implements OnInit {

    @Input() options$: Observable<WidgetsOptions>;

    constructor(private element: ElementRef) {
        super();
    }

    ngOnInit() {
        this.options$
            .pipe(
                take(1)
            )
            .subscribe(options => {
                this.options = options;
                this.addTo(options.map);
            });
    }

    onAdd(map: Map): HTMLElement {
        return this.element.nativeElement;
    }
}

导出类AppComponent{
//…初始缩放和宽度
mapWidgetsOptions$：可观察；
mapReady（地图：地图）{
此.mapWidgetsOptions$=的({
位置：'bottomleft'，
地图：地图
//我应该在这里添加鼠标位置吗？
});
}
}

app.component.html

<app-map (mapReady)="mapReady($event)">

    <map-widgets [options$]="mapWidgetsOptions$"></map-widgets>

</app-map>

map-widget.component.ts

export class AppComponent {
    // ... init zoom and width 
    mapWidgetsOptions$: Observable<WidgetsOptions>;

    mapReady(map: Map) {
        this.mapWidgetsOptions$ = of<WidgetsOptions>({
            position: 'bottomleft',
            map: map
            // should I add here mousePosition ?
        });
    }
}

 export class MapWidgetsComponent extends Control implements OnInit {

    @Input() options$: Observable<WidgetsOptions>;

    constructor(private element: ElementRef) {
        super();
    }

    ngOnInit() {
        this.options$
            .pipe(
                take(1)
            )
            .subscribe(options => {
                this.options = options;
                this.addTo(options.map);
            });
    }

    onAdd(map: Map): HTMLElement {
        return this.element.nativeElement;
    }
}

导出类MapWidgetsComponent扩展控件实现OnInit{
@Input（）选项$：可观察；
构造函数（私有元素：ElementRef）{
超级（）；
}
恩戈尼尼特（）{
这是我的选择$
.烟斗(
采取（1）
)
.订阅（选项=>{
this.options=选项；
this.addTo（options.map）；
});
}
onAdd（映射：映射）：HTMLElement{
返回此.element.nativeElement；
}
}

---

有人能举例说明如何制作吗？

在收听mousemove活动时，您需要扩展传单控制：

const Coordinates = L.Control.extend({
    onAdd: map => {
      const container = L.DomUtil.create("div");
      map.addEventListener("mousemove", e => {
          container.innerHTML = `
          <h2>Latitude is 
            ${e.latlng.lat.toFixed(4)} <br> 
            and Longitude is  ${e.latlng.lng.toFixed(4)}
            </h2>
          `;
     });
     return container;
   }
});
map.addControl(new Coordinates({ position: "bottomleft" }));

并在styles.css上添加

.leaflet-container .leaflet-control-mouseposition {
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px #bbb;
  padding: 0 5px;
  margin: 0;
  color: #333;
  font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

---

首先提供一个沙箱来玩。您的帖子应该包含一个和您已经尝试解决的问题。请参阅

传单。MousePosition

插件（），这取决于您如何集成传单。理论上，单击事件时为“是”，获取地图对象，挂接事件并获取坐标。这是一个模糊的问题。我就是这样做的。但我已经创建了自己的库包。因此，这个例子可能不是正确的best@xmojmr我添加了代码是的，我看到它是有效的。但我如何运用我的逻辑呢？我猜我有更好的方法将其添加到我的

MapWidgetsComponent

中，从mouseMove事件中获取lat和lng，并在

MapWidgetsComponent

模板中进行插值。我问我如何才能将此添加到现有的widgetYour问题中，在您编辑之前，是否有人可以提供一个如何执行此操作的示例。我的答案就在这里。此外，既然没有库就很容易实现某些功能，为什么还要向项目中添加另一个依赖项呢？最后但并非最不重要的一点是，我提供了第二种方法来使用传单.MousePosition执行完全相同的操作。检查更新的答案。