Ionic 2 / Angular 2中的Mapbox标记单击事件答案

【问题标题】：Mapbox marker click event in Ionic 2 / Angular 2Ionic 2 / Angular 2中的Mapbox标记单击事件
【发布时间】：2017-09-04 04:51:11
【问题描述】：

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

显示自定义标记 (code example here) 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>。那里最好的方法是什么？

【问题讨论】：

标签： javascript angular ionic2 mapbox mapbox-gl-js

【解决方案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);
}

【讨论】：

【解决方案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);

变量“coordinates”是一个数组，坐标=[lng,lat]，this.map只是我的Angular类下调用mapboxgl.Map对象的一个变量。

你必须知道我在这种情况下使用的是 Ionic 4。如果您需要更多信息，请告诉我。

问候。

【讨论】：