离子2 - 宣传单地图onclick事件

Question

I'm building my very first app using Ionic 2.

Note: I've already build the app, correctly loaded the map using "leaflet".

Problem : I want my Leaflet class to get map click position in order to save it.

But, If I use map.on('click', function) event provided by leaflet library, I can't access the class object.

I need that var clickPosition = e.latlang; to be accesible from class scope. How to do that?

If I use (click) listener provided by Ionic, I can't get event.latlng properties needed to save the click position on map.

I'm sure it's a problem os var scoping, but as I'm quite a newbie on angular and Ionic I need someone to show me the correct direction.

leaflet.ts

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { FormPage } from './form';

declare var L: any;


@Component({
    selector: 'page-leaflet',
    templateUrl: 'leaflet.html' 
 }) 
 export class LeafletPage {

    constructor(public navCtrl: NavController, public navParams: NavParams) {}

    ionViewDidLoad() { 

        console.log('ionViewDidLoad LeafletPage');

        // create the slippy map
        var map = L.map('mapLeaflet', {
            minZoom: 1,
            maxZoom: 4,
            center: [0, 0],
            zoom: 1,
            crs: L.CRS.Simple
        });

        // dimensions of the image
        var w = 5161,
            h = 3385,
            url = './assets/images/mapa.jpg';

        // calculate the edges of the image, in coordinate space
        var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
        var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
        var bounds = new L.LatLngBounds(southWest, northEast);

        // add the image overlay, so that it covers the entire map
        L.imageOverlay(url, bounds).addTo(map);

        // tell leaflet that the map is exactly as big as the image
        map.setMaxBounds(bounds);

        /****************************************************************
            tempMarker
        ******************************************************************/

        var tempIcon = L.icon({
            iconUrl: './assets/icon/pin.png',
            shadowUrl: '',
            iconSize:     [64, 64], // size of the icon
            shadowSize:   [0, 0], // size of the shadow
            iconAnchor:   [32, 64], // point of the icon which will correspond to markers location
            shadowAnchor: [0, 0],  // the same for the shadow
            popupAnchor:  [32, 20] // point from which the popup should open relative to the iconAnchor
        });

        map.on('click', onMapClick);

        var tempMarker;

        function onMapClick(e) {
                var clickPosition = e.latlang;
                var tempMarker = L.marker(e.latlng, {icon: tempIcon})
                .on('click', showMarkerMenu)
                .addTo(map);
       }

       function showMarkerMenu(e){
            alert('crear nueva incidencia ' + e.latlng);
            //this.navCtrl.push(FormPage);
       }

    }

}

leaflet.html

<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Mapa Leaflet</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <div id='mapLeaflet' class="mapLeaflet" ></div> 
</ion-content>

Answer 1

instead of

map.on('click', onMapClick);

use

map.on('click', (e)=>{this.onMapClick(e)});

to check use

onMapClick(e) {
    console.log(e.latlng.lng, e.latlng.lat);
....
}

Answer 2

Just if someone is in this same situation, I accomplished this reestructuring my app and using this starter proyect as template:

https://github.com/haoliangyu/angular2-leaflet-starter