Question

我开始使用Ionic 2 / Angular 2并尝试将Mapbox应用到我的应用中。

显示自定义标记（code example here）Mapbox需要一个DOM元素，据我所知，它不是Angular方式。我想在标记上添加一个点击事件，但由于Mapbox使用了元素，我并不完全确定如何干净地处理这个问题＆＃34; Angular方式＆＃34;。

基本上，这是最新版本（显示地图和标记有效，但可以预见，当我点击标记时，事件监听器无法找到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);

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

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

致谢。

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

2 个答案: