MapBox Markerにclickイベント

GoogleMapでは、Markerにclickイベントを定義するときは、

const marker = new google.maps.Marker({
	position: marker_loc,
	map: gmap,
	title: '赤ピン'
});
//マーカークリックでclickEventを実行
google.maps.event.addListener(marker, 'click', clickEvent);

でできるけど、MapBoxでは、

const marker = new mapboxgl.Marker({
	color: '#ff0000'
	})
	.setLngLat(marker_loc)
	.addTo(gmap);
//マーカークリックでclickEventを実行
marker.on('click', clickEvent);

では、動かん！！！

MapBoxのDocumentをよく読むと、MarkerのEventsは、「drag」「dragstart」「dragend」の3つしかないことがわかった。

Markerのソースコードを確認したところ、「click」は、MarkerのPopup機能に使われているため、それ以外では使えなくなっていることがわかった。(以下のリンクの399行目からの_onMapClick)

そこで、Markerクラスをオーバーライドして、_onMapClickを書き換えることとした。

class customMarker extends mapboxgl.Marker{
    _onMapClick(e) {
        const targetElement = e.originalEvent.target;
        const element = this._element;

        if (targetElement === element || element.contains((targetElement))) {
            clickEvent();
        }
    }
}

const marker = new customMarker({
	color: '#ff0000'
	})
	.setLngLat(marker_loc)
	.addTo(gmap);

で、MapBoxのMarkerに、clickイベントを実行できるようにできた。