我有一张 map ,在上面绘制要素,并为每个要素提供标题和描述,稍后我将在弹出窗口中使用它们。
我创建这样的功能:
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 上的所有位置。
Onclick 我从 bootstrap 调用 popover 函数,如下所示:
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');
}
});
这部分有效。当我单击某个要素时,它会显示弹出窗口;当我单击 map (没有要素的地方)时,它会关闭它。但是,如果我打开一个弹出窗口并单击另一个功能,它将在正确的位置打开弹出窗口,但不会更改该功能的内容和标题。
我想我可以通过首先通过添加来销毁弹出窗口来解决这个问题
$(element).popover('destroy');
在设置弹出窗口的位置并创建新的弹出窗口之前。但是,如果我这样做,我会在 Jquery 和 Bootstrap 中收到错误:
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)
知道如何解决这个问题吗?
最佳答案
你试试这个,应该有效!
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');
}
关于javascript - openlayers 标记上的 Bootstrap 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45710951/