Actualmente he implementado marcadores personalizados en el mapa usando el siguiente código:
// extend mapboxGL class so we can edit the click function class CustomMarker extends mapboxgl.Marker { // new method onClick, sets _handleClick to a function you pass in onClick(handleClick) { this._handleClick = handleClick; return this; } // the existing _onMapClick was there to trigger a popup // but we are hijacking it to run a function we define _onMapClick(e) { const targetElement = e.originalEvent.target; const element = this._element; if (this._handleClick && (targetElement === element || element.contains((targetElement)))) { this._handleClick(); } } }; const el1 = document.createElement('div'); el1.id = "marker1"; el1.style.marginTop = '-'+(36/2)+'px'; // make a marker and add it to the map new CustomMarker(el1) .onClick(() => { //when clicked, define the following function console.log(1+1); }) .addTo(map); Luego agregué un botón html para navegar entre los marcadores (es decir, el siguiente y el anterior) que luego llama a algo como document.getElementByID("marker1").click() una vez que se hace clic.
Este botón funciona normalmente y activa el clic del marcador, sin embargo, cuando hago clic en el mapa del cuadro de mapa una vez (un solo clic en cualquier parte del mapa), document.getElementByID("marker1").click() no parece ser llamado cuando hago clic el botón HTML. Sin embargo, si arrastro el mapa o hago doble clic para acercar el zoom, el botón html vuelve a funcionar. ¿Alguien sabe por qué pasa esto?
Algo muy confuso que has hecho. En realidad, MapBox Marker no tiene un evento de click , pero su Element sí. Entonces, para que las cosas funcionen, debe usar lo siguiente:
marker.getElement().addEventListener('click', function(event: PointerEvent) { event.stopPropagation(); // to prevent map click event from triggering as well ... });