具有多点功能的弹出窗口

Question

我在打开第 5 层时遇到了一些问题 looking/coping这个例子 https://openlayers.org/en/latest/examples/icon.html?q=marker

不止一个"clickable icon" 如果我点击并打开弹出窗口就可以了，然后，如果我单击地图（不是图标），弹出窗口就会消失，好吧！但是如果我在第一个图标上打开了一个弹出窗口，然后我点击另一个图标，气球会向上移动下一个，但内容没有改变...

我哪里错了！？谢谢

Answer 1

您需要在创建新弹出窗口之前销毁旧弹出窗口。但是销毁后立即重新创建可能会出现问题，请参阅 Bootstrap popover destroy & recreate works only every second time 因此您可能需要短暂的超时，并且示例中相关代码的更新看起来像

    if (feature) {
      $(element).popover('destroy');
      setTimeout(function () {
        var coordinates = feature.getGeometry().getCoordinates();
        popup.setPosition(coordinates);
        $(element).popover({
          'placement': 'top',
          'html': true,
          'content': feature.get('name')
        });
        $(element).popover('show');
      }, 200);
    } else {
      $(element).popover('destroy');
    }

或者您可以尝试基于该问题中其他答案之一的解决方案

具有多点功能的弹出窗口

popup with multiple points features

openlayers

openlayers-5