Angular 7 传单地图事件的变量访问问题

Question

我在 Angular 上使用 Leaflet。我创建了一张地图。后来我在地图上添加了一个标记。单击地图上的某个位置时，将调用 onMapClick 函数。但是我无法在 onMapClick 函数中访问标记和地图。当调用 initMap 函数时，我可以在 console.log 结果上看到标记。调用 onMapClick 函数时，我无法访问标记。我得到一个错误。错误是

marker is not undefined

我该如何解决？

import {Component, OnInit} from '@angular/core';
declare let L;

@Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
    map;
    lat;
    lng;
    marker;

    constructor() {
    }

    ngOnInit() {
        this.initMap();
    }
    initMap() {
        this.map = new L.Map('map', {
            zoomControl: true,
            maxZoom: 20,
            minZoom: 5,
            center: new L.LatLng(41.00650212603, 28.8530806151128),
            zoom: 10
        });

        const tileLayers = {
            'Google Uydu': L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&hl=tr&x={x}&y={y}&z={z}', {
                subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
                maxNativeZoom: 20,
                zIndex: 0,
                maxZoom: 20
            }).addTo(this.map)
        };
        L.control.layers(tileLayers, null, {collapsed: false}).addTo(this.map);

        this.marker = L.marker(this.map.getCenter(), {
            draggable: true,
            icon: L.icon({
                iconUrl: './assets/img/marker-icon-2x.png',
                iconSize: [25, 35],
                iconAnchor: [30 / 2, 35],
            })
        }).addTo(this.map);
        console.log("this.marker", this.marker);
        this.map.on('click', this.onMapClick);
    }

    onMapClick(e) {
        this.lat = e.latlng.lat;
        this.lng = e.latlng.lng;
        console.log("this.marker", this.marker);
        this.marker.setLatLng(new L.LatLng(e.latlng.lat, e.latlng.lng));
        this.map.panTo(new L.LatLng(e.latlng.lat, e.latlng.lng));
        this.map.setView(new L.LatLng(e.latlng.lat, e.latlng.lng), 18);
    }
}

Answer 1

我认为您错过了在 this.onMapClick

上通过比赛的机会

因此应该是this.map.on("click", e => this.onMapClick(e));

您可以找到更多原因

Demo

Answer 2

如果没有代码的工作示例，则很难准确查明问题所在。仅通过阅读您的代码，我认为您在 onMapClick() 方法中引用了错误的上下文。

this 在您的方法中不是您的 angular class 而是您的地图本身。

要在回调中引用您的 angular class，您必须将另一个上下文绑定到它。

实现此目的的一种方法如下：

this.map.on('click', this.onMapClick.bind(this));

现在，onMapClick() 中的 this 应该指向您的 angular class。

Angular 7 传单地图事件的变量访问问题

Angular 7 variable access problem on Leaflet map event

markers

leaflet

typescript

angular