离子 2 - 传单地图点击事件

Question

我正在使用Ionic 2构建我的第一个应用程序。

注意：我已经构建了应用程序，使用"传单"正确加载了地图。

问题：我希望我的传单类获取地图单击位置以保存它。

但是，如果我使用传单库提供map.on('click', function)事件，则无法访问类对象。

我需要该var clickPosition = e.latlang;可以从类范围访问。怎么做？

如果我使用 Ionic 提供的（点击）侦听器，我无法获取在地图上保存点击位置所需的 event.latlng 属性。

我确定这是 var 范围界定的问题，但由于我是角度和 Ionic 的新手，我需要有人向我展示正确的方向。

传单

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);
       }
    }
}

传单.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

而不是

map.on('click', onMapClick);

用

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

检查使用情况

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

Answer 2

如果有人处于同样的情况，我完成了对我的应用程序的重组，并使用此入门程序作为模板：

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