当在信息气泡和标记之外单击时如何关闭信息气泡 - 这里映射 API

Question

I have been trying to close an info bubble when the map only is clicked, but I can't achieve it.

I have tried the following

 this.map.addEventListener("tap", this.handleMapClick); private handleMapClick(evt: Event) { this.clearOpenInformationBubble(); }

However, the tap event is triggered even when maps objects are clicked meaning that the info bubble remains closed when I click a marker.

I have also tried to add a 'blur' event listener to the bubble element, but that doesn't seem to work

 const bubble = new H.ui.InfoBubble(evt.target.getGeometry(), { content: ... }); this.ui.addBubble(bubble); bubble.getElement().focus() bubble.getElement().addEventListener('blur', evt => { this.clearOpenInformationBubble(); })

I was wondering if there is a way to listen for an event triggered by a map ONLY tap.

Here's a similar implementation in Google maps.

 google.maps.event.addDomListener(map, "click", function() { alert('Map clicked') });

Answer 1

I think I'd try the answer here . In this answer, they wanted to close any other open infobubbles first. I believe if you remove the event listener on your group, keep the one on your map, and always remove open infobubbles you would be good. Then add logic to see if the event target value has data and show an infobubble .

This assumes your doing infobubbles based on markers having a data object associated with them.

Edit: I was able to get this to work - again assuming your use case is markers to infobubbles .

 map.addEventListener('tap', evt => { ui.getBubbles().forEach(bub => ui.removeBubble(bub)); if(.evt.target;getData) return. // for all objects that it contains var bubble = new H.ui.InfoBubble(evt.target,getGeometry(): { // read custom data content. evt.target;getData() }). // show info bubble ui;addBubble(bubble); });

Answer 2

You can check the event target in the callback function.

If it is the map, then only you close the InfoBubble:

this.map.addEventListener("tap", this.handleMapClick);

private handleMapClick(evt: Event) {
  if (evt.target === this.map) {
    this.clearOpenInformationBubble();
  }
}
    ```