Проблема доступа к переменной Angular 7 в событии карты Leaflet

Question

Я использую Leaflet на Angular.Я создал карту.Позже я добавил маркер на карту.При нажатии на местоположение на карте вызывается функция onCapClick.Но я не могу получить доступ к маркеру и карте в функции onMapClick.Когда вызывается функция initMap, я вижу маркер в результате console.log.Когда вызывается функция onMapClick, я не могу получить доступ к маркеру.Я получаю ошибку.Ошибка маркера не является неопределенной.Как я могу решить?

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

Без рабочего примера вашего кода трудно точно определить проблему.Просто читая ваш код, я думаю, что вы ссылаетесь на неправильный контекст внутри вашего onMapClick() метода.

this внутри вашего метода - это не ваш угловой класс, а ваша карта.

Чтобы ссылаться на свой угловой класс внутри обратного вызова, вы должны привязать к нему другой контекст.

Один из способов добиться этого заключается в следующем:

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

Теперь this внутри onMapClick() должно указывать на ваш угловой класс.

Answer 2

Я думаю, что вы пропускаете событие на вашем this.onMapClick

, поэтому оно должно быть this.map.on("click", e => this.onMapClick(e));

Вы можете найти больше здесь относительно причины

Демо