[英]Bootstrap popover on openlayers markers
我有一張地圖,上面可以繪制要素,並為每一個要素提供標題和描述,稍后將它們與彈出窗口一起使用。
我創建如下功能:
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);
}
這樣可以正常工作,並在地圖上創建所有位置。
Onclick我從引導程序調用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');
}
});
這部分起作用。 單擊某個功能時,它會顯示彈出窗口,而當您單擊地圖(沒有功能)時,它會關閉彈出窗口。 但是,如果我打開一個彈出窗口並單擊另一個功能,它將在正確的位置打開彈出窗口,但不會更改該功能的內容和標題。
我以為可以解決這個問題,方法是先添加
$(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');
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.