如何删除以前的信息气泡，如果我点击不同的标记在这里的地图

How to remove previous infobubble, if I click different marker in HERE Map?

本文关键字：地图 在这里 如果 气泡 删除 何删除 信息      更新时间：2023-09-26

下面是我添加infobubble的代码。我想在点击（点击）其他标记后删除当前的信息气泡。

function addInfoBubble(map) 
    {
    var group = new H.map.Group();
    map.addObject(group);
    // add 'tap' event listener, that opens info bubble, to the group
    group.addEventListener('tap', function(evt) {
    // event target is the marker itself, group is a parent event target
    // for all objects that it contains
    var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
    // read custom data
    content: evt.target.getData()
    });
    // show info bubble
    ui.addBubble(bubble);
    }, false);
    }

如果单击其他标记，代码行ui.removeBubble(bubble)应该放在哪里？

您可以在添加新的信息气泡之前从ui中删除所有信息气泡。如果你不介意删除所有当前显示的气泡，这样的东西应该可以工作：

ui.getBubbles().forEach(bub => ui.removeBubble(bub));

将其纳入您的代码：

function addInfoBubble(map) {
   var group = new H.map.Group();
   map.addObject(group);
   // add 'tap' event listener, that opens info bubble, to the group
   group.addEventListener('tap', function(evt) {
      // event target is the marker itself, group is a parent event target
      // for all objects that it contains
      var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
        // read custom data
        content: evt.target.getData()
      });
      //remove infobubbles
      ui.getBubbles().forEach(bub => ui.removeBubble(bub));
      // show info bubble
      ui.addBubble(bubble);
   }, false);
}

以下是您可以做的事情的更深入的总结：

删除创建的最后一个信息气泡：

ui.removeBubble(bubbles[bubbles.length - 1])

关闭创建的第一个信息气泡：

bubbles[bubbles.length - 1].close()

删除创建的第一个信息气泡：

ui.removeBubble(bubbles[0])

关闭所有气泡：

bubbles.forEach((bubble) => {
    bubble.close()
});

去除所有气泡

while(bubbles.length > 0) {
   this.ui.removeBubble(bubbles[0])
}

点击infobubbles演示，这样你就可以尝试一下了。

相关文章：