Ionic 2/Angular 2中的Mapbox标记点击事件

问题描述：

我开始使用Ionic 2/Angular 2并尝试将Mapbox实现到我的应用程序中。Ionic 2/Angular 2中的Mapbox标记点击事件

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

基本上，这是最新的版本（显示地图和标记的作品，但可以预见，当我点击该标记的事件监听器无法找到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>。那里最好的方法是什么？

答

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

Ionic 2/Angular 2中的Mapbox标记点击事件

相关推荐