javascript - 在 Openlayers 3 中打开弹出窗口

Question

我想创建一个类似于 Google Maps 组件的组件，您可以在其中单击滚动条中的图片，然后地图会飞到该照片并在弹出窗口中打开它。

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

<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');
      }
    }
  });
});

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