[英]Bootstrap popover on openlayers markers
I have a map on which I plot features and give each of these features a title and description which I later use with a popup. 我有一张地图,上面可以绘制要素,并为每一个要素提供标题和描述,稍后将它们与弹出窗口一起使用。
I create the features like such: 我创建如下功能:
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);
}
This works fine and creates all the locations on the map. 这样可以正常工作,并在地图上创建所有位置。
Onclick I call the popover function from bootstrap like such: 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');
}
});
This works partially. 这部分起作用。 It shows the popup when I click a feature and it closes it when I click on the map (where there's no feature). 单击某个功能时,它会显示弹出窗口,而当您单击地图(没有功能)时,它会关闭弹出窗口。 However, if I have a popup open and click another feature, it will open the popup on the right location but it won't change the content and title of the feature. 但是,如果我打开一个弹出窗口并单击另一个功能,它将在正确的位置打开弹出窗口,但不会更改该功能的内容和标题。
I thought I could solve this by first destroying the popover by adding 我以为可以解决这个问题,方法是先添加
$(element).popover('destroy');
before setting the location of the popup and creating a new popover. 在设置弹出窗口的位置并创建新的弹出窗口之前。 If I do this however I get errors in Jquery and Bootstrap: 如果我这样做,则会在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)
Any idea how I can solve this problem? 知道如何解决这个问题吗?
You try this, should work! 您尝试此操作,应该可以工作!
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.