2017-01-18 15 views
0

私はイオン2イオン2 - リーフレットマップのonclickイベント

を使用して私の非常に最初のアプリを構築しています注:私はすでにアプリを構築してきましたが、正しく「リーフレット」を使用してマップをロードしました。

問題:私のリーフレットクラスは、マップのクリック位置を保存して保存するようにします。

しかし、map.on('click', function)イベントをリーフレットライブラリで提供しても、クラスオブジェクトにアクセスすることはできません。

私はvar clickPosition = e.latlang;にクラススコープからアクセスできるようにする必要があります。どうやってするか?私はイオンが提供する(クリック)リスナーを使用している場合

することは、私は、地図上のクリック位置を保存するために必要なevent.latlngプロパティを取得することはできません。

私はそれがvar scopingの問題だと確信していますが、私は角度とイオン性についてかなり初心者ですから、私には正しい方向を示す人が必要です。

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> 

答えて

1

代わりの

map.on('click', onMapClick); 

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

に確かにチームメイトを使用することを確認するために使用

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

ご指摘のように、私はちょうど同じ方法を使用していくつかの時間前に私の問題を解決しましたしかし、私はこの答えを更新することを忘れています。私はあなたの答えを正しいものにしています、これを指摘してくれてありがとう。 –

+0

ありがとうございます!回答は他の人にとって役に立つかもしれません – Leonid