Ionic 2 - Leaflet Karte Onclick-Ereignis

Question

ich meine erste app bauen Ionic mit 2.

Hinweis: Ich habe bereits die App bauen, richtig die Karte geladen mit "Merkblatt".

Problem: Ich möchte meine Leaflet-Klasse Kartenklickposition erhalten, um es zu speichern.

Aber, wenn ich map.on('click', function) Event von Leaflet-Bibliothek zur Verfügung gestellt, kann ich nicht auf das Klassenobjekt zugreifen.

Ich brauche, dass var clickPosition = e.latlang; aus der Klasse zugänglich sein. Wie geht das?

Wenn ich (Klick) Hörer von Ionic bereitgestellt verwenden, kann ich nicht event.latlng Eigenschaften erhält notwendig, um die Klickposition auf der Karte zu speichern.

Ich bin sicher, es ist ein Problem os var Scoping, aber da ich ein Neuling auf eckigen und ionischen bin brauche ich jemanden, der mir die richtige Richtung zeigt.

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

statt

map.on('click', onMapClick); 

Verwendung

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

Verwendung

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

Answer 2

dir vor, wenn jemand in der gleichen Situation, ich erreicht dies meine app reestructuring und diese mit Starter-Projekt als Vorlage:

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