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>。那裏最好的方法是什麼？

來源

2017-04-08 Davor

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

來源

2017-06-08 05:29:25

Ionic 2/Angular 2中的Mapbox標記點擊事件

回答

相關問題