Question

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

注意：我已经构建了应用，使用＆＃34;传单＆＃34;正确加载了地图。

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

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

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

如果我使用Ionic提供的（点击）听众，我无法获得 event.latlng 属性以保存地图上的点击位置。

我确定这是一个问题，但是因为我是角度和离子的新手，我需要有人向我展示正确的方向。

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

Answer 2

如果有人处于同样的情况，我完成了这个重构我的应用程序并使用这个启动程序proyect作为模板：

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

Ionic 2 - 宣传单地图onclick事件

2 个答案: