在信息气泡和标记外单击时如何关闭信息气泡 - HERE 地图 API

Question

我一直试图在仅单击地图时关闭信息气泡，但无法实现。

我试过以下方法

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

    private handleMapClick(evt: Event) {
      this.clearOpenInformationBubble();
    }

但是，即使单击地图对象也会触发点击事件，这意味着当我单击标记时信息气泡保持关闭状态。

我也试过给气泡元素添加一个 'blur' 事件侦听器，但这似乎不起作用

const bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
      content: ...
    });

    this.ui.addBubble(bubble);

    bubble.getElement().focus()

    bubble.getElement().addEventListener('blur', evt => {
      this.clearOpenInformationBubble();
    })

我想知道是否有一种方法可以侦听仅由点击地图触发的事件。

Google 地图中有一个类似的实现。

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

Answer 1

我想我会尝试回答。在这个答案中，他们想先关闭任何其他打开的 infobubbles。我相信，如果您删除组中的事件侦听器，将其保留在您的地图上，并始终删除打开的 infobubbles，您会很好。然后添加逻辑，查看事件目标值是否有数据，并显示一个infobubble.

这假设您infobubbles基于具有与之关联的数据对象的标记。

编辑：我能够让它工作 - 再次假设您的用例是 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

您可以在回调函数中查看事件目标。

如果是地图，那么只有你关闭信息气泡：

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

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

在信息气泡和标记外单击时如何关闭信息气泡 - HERE 地图 API

How to close an info bubble when there is a click outside the info bubble and marker - HERE maps API

javascript

here-api

vue.js