javascript - Ionic 2 - 传单 map onclick 事件

Question

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

注意:我已经构建了应用程序，使用“传单”正确加载了 map 。

问题:我希望我的 Leaflet 类获取 map 点击位置以便保存它。

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

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

如果我使用 Ionic 提供的 (click) 监听器，我无法获得在 map 上保存点击位置所需的 event.latlng 属性。

我确定这是 os var 范围的问题，但由于我是 angular 和 Ionic 的新手，我需要有人告诉我正确的方向。

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

代替

map.on('click', onMapClick);

使用

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

检查使用

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