有两种方案,一种是利用overlay,采用pupup(经常用来弹框保留,地图移动时,弹框不关闭,会自动计算位置,不会消失或出现位置混轮)
另一种是直接添加额外的div(这里主要是针对鼠标移动信息弹框即消失的情况,不然每次移动就要重新重新计算弹框的新的位置),首先计算当前当前的点击点处的屏幕坐标(通过getPixelFromCoordinate得到当前屏幕的像素坐标)然后将新添加的div添加到当前屏幕上,并为div添加样式,在样式中控制具体的内部样式(注意要为这个div设计定位为绝对定位)
两种方式各有利弊,具体如下所示
方案1:
var div = document.createElement('div');
var marker = new ol.Overlay({
element : div,
id : mkId,
position : newPos,
positioning : 'center-center'
});
map.addOverlay(marker);
$(div).popover({
'placement': 'top',
'animation': false,
'html': true,
'title':'<div id="tcontent" ><a>'+feature.get('name')+'</a></div>',
'content': getNationFltHTML(feature)
});
$(di