在Openlayers中打开Popup 3

Question

我想创建一个像谷歌地图组件这样的组件，您可以在其中点击滚动条中的图片，地图会飞到该照片并弹出窗口。

到目前为止，我正在使用此弹出式工作：

<div id="map" class="map" style="height: 100%; width: 100%;">
  <div id="popup">
</div>

可以使用以下方式打开弹出窗口：

var element = document.getElementById('popup');
var popup = new ol.Overlay({
  element: element,
  positioning: ol.OverlayPositioning.BOTTOM_CENTER,
  stopEvent: false
});
map.addOverlay(popup);

map.on('singleclick', function(evt) {
  map.getFeatures({
    pixel: evt.getPixel(),
    layers: vectorLayers,
    success: function(layerFeatures) {
      var feature = layerFeatures[0][0];
      if (feature) {
        var geometry = feature.getGeometry();
        var coord = geometry.getCoordinates();
        popup.setPosition(coord);
        $(element).popover({
          'placement': 'top',
          'html': true,
          'content': feature.get('desc')
        });
        $(element).popover('show');
      } else {
        $(element).popover('destroy');
      }
    }
  });
});

但是如何使用正确的内容在正确的坐标处打开弹出窗口？！？