HERE Maps - Infobubble close event / hook

问题

I have an Angular 8 application with sidebar items and map with markers. The thing is that I need to open the item in the sidebar when user has clicked on the marker and opened infobubble. This part is fairly easy to do as I can add eventListener for 'tap' on the marker and then do required logic.

marker.addEventListener('tap', (evt) => {
   this.onTapBubble(evt, 'marker');
});

The problem is when I need to clear selected item on infobubble close event as I couldn't find anything any hook that would activate when infobubble is closed on its button. Does anyone have an idea is this is possible and how?

I've found similar article about it, but it's 5 years old, and I'm not sure this is working now as I haven't been able to make it work: How to hook into the "close infobubble" event in HERE maps Javascript API

回答1:

The article you found is for deprecated version of HERE javascript API (2.5.x).

For the current APi version (3.x) it's pretty easy to do. There are actually two ways to do it:

1. listen to InfoBubble's statechange event:

bubble = new H.ui.InfoBubble(map.getCenter(), {
  content: 'Test'
});

bubble.addEventListener('statechange', function(evt) {
    if (evt.target.getState() === H.ui.InfoBubble.State.CLOSED) {
       console.log('Bubble closed')
    }
})

2. add onStateChange callback to InfoBubble's Options:

bubble = new H.ui.InfoBubble(map.getCenter(), {
  content: 'Test',
  onStateChange: function(evt) {
    if (evt.target.getState() === H.ui.InfoBubble.State.CLOSED) {
       console.log('Bubble closed');
    }
  }
});

See InfoBubble#Options and InfoBubble#getState for more details.

来源：https://stackoverflow.com/questions/60036243/here-maps-infobubble-close-event-hook

标签

here-api