带有 geoJson 的 Ionic2 Leaflet 标记 onClick 事件

Question

I am getting an error when adding onClick event to a marker, generated by GeoJSON. I have tried using the following:

layer.on(‘click’, (e)=> {this.onMapClick(e)});

The error I receive when clicked is

ERROR TypeError: _this.onMapClick is not a function

onMapClick(e) {
    console.log(e.latlng.lng, e.latlng.lat)
}
initMap() {
    this.MapData.getPoints().subscribe((res) => {

        this.markers = res;

        function oneachFeature(feature, layer) {
            layer.bindPopup(feature.properties.description);
            layer.on('click', (e) => {
                this.onMapClick(e)
            });

        }
        var myLayer = L.geoJSON(this.markers, {
            pointToLayer: function(feature, latlng) {
                if (feature.properties.route === "red") {
                    var smallIcon = new L.Icon({
                        iconSize: [27, 27],
                        iconAnchor: [13, 27],
                        popupAnchor: [1, -24],
                        iconUrl: 'assets/images/redx2.png'
                    });
                    return L.marker(latlng, {
                        icon: smallIcon
                    });
                } else if (feature.properties.route === "blue") {
                    var smallIcon = new L.Icon({
                        iconSize: [27, 27],
                        iconAnchor: [13, 27],
                        popupAnchor: [1, -24],
                        iconUrl: 'assets/images/bluex2.png'
                    });

                    return L.marker(latlng, {
                        icon: smallIcon
                    });
                }
            },
            onEachFeature: oneachFeature
        })

        myLayer.addTo(this.map);
    });
}

Answer 1

Issue : You are losing the scope( this ) via onEachFeature: oneachFeature , You can maintain the scope via one of the below methods.

---

All you need is to bind(this) :

onEachFeature: oneachFeature.bind(this)

OR Use ES6 (Fat Arrow Operator)

onEachFeature: (feature, layer) => oneachFeature(feature, layer)

OR

onEachFeature : (feature, layer) => {
    layer.bindPopup(feature.properties.description);
    layer.on('click', (e) => {
        this.onMapClick(e)
    });
}