Javascript openlayers标记上的Bootstrap popover

我有一个地图，我在上面绘制特征，并给每个特征一个标题和描述，稍后我会在弹出窗口中使用这些标题和描述

我创建了如下功能：

for (i = 0; i < locations.length; i++) { 
    var feature = new ol.Feature(
        new ol.geom.Point(ol.proj.transform([locations[i]['longitude'], locations[i]['latitude']], 'EPSG:4326', 'EPSG:3857'))
    );
    feature.title = locations[i]['name'];
    feature.description = 'Latitude: '+locations[i]['latitude']+'<br>Longitude: '+locations[i]['longitude']+'<br><a href="#" title="">Test</a>';
    feature.setStyle(circle);
    markerLayer.getSource().addFeature(feature);
}

map.on('click', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature, layer) {
            return feature;
        });
    if (feature) {
        popup.setPosition(feature.getGeometry().getCoordinates());
        $(element).popover({
            'placement': 'right',
            'html': true,
            'content': feature.description,
            'title': feature.title
        });
        $(element).popover('show');

    } else {
        $(element).popover('destroy');
    }
});

这部分起作用。当我点击一个功能时，它会显示弹出窗口，当我点击地图（没有功能的地方）时，它会关闭弹出窗口。但是，如果我打开了一个弹出窗口并单击另一个功能，它将在正确的位置打开弹出窗口，但不会更改功能的内容和标题

我想我可以先通过添加

$(element).popover('destroy');

在设置弹出窗口的位置和创建新的弹出窗口之前。但是，如果我这样做，我会在Jquery和引导中出错：

bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'trigger' of null
at HTMLDivElement.q (bootstrap.min.js:6)
at HTMLDivElement.e (jquery.min.js:3)
at HTMLDivElement.handle (bootstrap.min.js:6)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.q.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:4)
at HTMLDivElement.<anonymous> (jquery.min.js:4)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at r.fn.init.trigger (jquery.min.js:4)

bootstrap.min.js:6未捕获类型错误：无法读取null的属性“trigger”
在htmldevelment.q（bootstrap.min.js:6）
在htmldevelment.e（jquery.min.js:3）
位于htmldevelment.handle（bootstrap.min.js:6）
在htmldevelment.dispatch（jquery.min.js:3）
位于htmldevelment.q.handle（jquery.min.js:3）
at Object.trigger（jquery.min.js:4）
在HTMLDEVELENT。（jquery.min.js:4）
在Function.each（jquery.min.js:2）
在r.fn.init.each（jquery.min.js:2）
在r.fn.init.trigger处（jquery.min.js:4）

---

你知道我怎样才能解决这个问题吗？

你试试这个，应该有用

   if(feature){
                popup.setPosition(feature.getGeometry().getCoordinates());
                $(element).attr('data-placement', 'top');
                $(element).attr('data-html', true);
                $(element).attr('data-original-title', feature.get('your title key'));
                $(element).attr('data-content', feature.get('key - what you would like to include'));
                $(element).popover('show');

            }

            else{
                $(element).popover('destroy');
            }