javascript - Ionic 2/Angular 2 中的 Mapbox 标记单击事件

Question

我开始使用 Ionic 2/Angular 2 并尝试在我的应用程序中实现 Mapbox。

要显示自定义标记 ( code example here )，Mapbox 需要一个 DOM 元素，据我所知，这并不是真正的 Angular 方式。我想在标记上添加一个点击事件，但因为 Mapbox 使用元素，所以我不确定如何干净地处理这种“Angular 方式”。

基本上，这是最新版本(显示 map 和标记有效，但可以预见，当我单击标记时，事件监听器无法找到 this.onMarkerClicked):

export class HomePage {
  //(...)

  refreshMapPosition() {
    /*Initializing Map*/
    mapboxgl.accessToken = this.config.mapbox_public_token;
    this.map = new mapboxgl.Map({ /*https://www.mapbox.com/mapbox-gl-js/api/#map*/
      style: 'mapbox://styles/mapbox/light-v9',
      center: [this.Coordinates.longitude, this.Coordinates.latitude],
      zoom: 16,
      pitch: 80,
      minZoom: 7.5,
      maxZoom: 17,
      container: 'map',
      interactive: false,
    });

    var elCreature = document.createElement('div');
    elCreature.className = 'icon-creature alpaca';
    elCreature.addEventListener('click', function() {
      this.onMarkerClicked();
    });

    var markerCreature = new mapboxgl.Marker(elCreature, {offset: [-20, -20]})
      .setLngLat([this.Coordinates.longitude, this.Coordinates.latitude])
      .addTo(this.map);
  }

  onMarkerClicked() {
    console.log("click");
  }
}

如果 elCreature 可以来自一个组件，我会更高兴，我可以在其中使用 <div class="icon-creature alpaca" (click)="onMarkerClicked"></div> .那里最好的方法是什么？

Answer 1

// on your marker HTML
var _self = this;
var _data = this.value;
el.addEventListener('click', function() {
   self.markerClicked(_data);
});

// angular method
markerClicked(value){
  console.log(value);
}