LeafletJS在角度4上单击事件数据的绑定

时间:2018-11-05 16:16:10

标签: angular mongodb leaflet mouseevent

我正在尝试在angular 4上的传单js映射中将此click事件上的值绑定。但是,它没有为绑定的变量提供访问权限。我想在click事件上更新那些绑定的变量。 请帮助我找到一种访问这些绑定值的方法。

export class ViewLocationsComponent implements OnInit {

 long = '';
  lati = '';//These values needed to be accessed
 ngOnInit() {
    this.loadAllLocations();
    this.update();
  }

update(): void{
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    map.on('click', function (e){

      var lati = e.latlng.lat;
      var long = e.latlng.lng;//These are the values needed to be bind
      alert(lati+"  "+long);
       var marker = new L.marker([e.latlng.lat,e.latlng.lng]).addTo(map);

      marker.bindPopup("marker").openPopup();

    });

  }

}

此功能不支持'this'关键字。

1 个答案:

答案 0 :(得分:0)

我怀疑我是否正确理解了您的问题。但是我想也许这就是您想要的。

export class ViewLocationsComponent implements OnInit {

    long = 0;   lati = 0; //These values needed to be accessed  ngOnInit() {
    this.loadAllLocations();
    this.update();   }

update(): void{
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    map.on('click', e=>{

      this.lati = e.latlng.lat;
      this.long = e.latlng.lng;//These are the values needed to be bind
      alert(lati+"  "+long);
       var marker = new L.marker([e.latlng.lat,e.latlng.lng]).addTo(map);

      marker.bindPopup("marker").openPopup();

    });

  }

}