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

Question

我開始使用 Ionic 2 / Angular 2 並嘗試在我的應用程序中實現 Mapbox。

為了顯示自定義標記（ 此處的代碼示例），Mapbox 需要一個 DOM 元素，據我了解，這並不是真正的 Angular 方式。 我想在標記上添加一個點擊事件，但因為 Mapbox 使用元素，我不完全確定如何干凈地處理這種“Angular 方式”。

基本上，這是最新版本（顯示地圖和標記有效，但可以預見的是，當我單擊標記時，事件偵聽器找不到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);
}

Answer 2

所以我找到了一些可能對你有幫助的東西，我按照文檔中提到的那樣創建了一個標記，然后我使用 getElement() 函數獲取了該市場的元素，之后我將事件添加到標記中，我不知道它是否適用於各種標記，但您可以嘗試。

var marker = new mapboxgl.Marker()
.setLngLat([lng, lat])
.addTo(this.map);

marker.getElement().addEventListener("click", function(){
  console.log("function");
});

睡了一會后，我發現還有另一件事可以使用，因此您可以先創建一個 Popup，然后使用 setPopup() 方法將該 Popou 添加到 Marker 對象中，實際上它就像一個 onClick 事件，因為當您單擊時彈出的標記出現。 這是一個例子。

var popup = new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML("<h1>Hello</h1>");

var marker = new mapboxgl.Marker()
.setLngLat(coordinates)
.setPopup(popup)
.addTo(this.map);

變量“坐標”是一個數組，這樣坐標 = [lng,lat]，而 this.map 只是我的 Angular 類下的一個變量，它調用 mapboxgl.Map 對象。

您必須知道在這種情況下我使用的是 Ionic 4。 如果您需要更多信息，請告訴我。

問候。