[英]How to bring a marker popup to the front in OpenLayers?
I have a popup that I'm declaring like so in OpenLayers: 我在OpenLayers中声明了一个弹出窗口:
var feature = new O[penLayers.Feature(markers, lonLat);
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
'autoSize': true;
'maxSize': new OpenLayers.Size(500, 300)
});
The issue is that the multiple popups on my map are being created with consecutive z-indexes, so the popups will always be shown in the order the markers were added, with the popup of the most recent marker always being on top. 问题在于,我的地图上的多个弹出式窗口是使用连续的z-indexs创建的,因此将始终按照添加标记的顺序显示弹出式窗口,而最新标记的弹出式窗口始终位于顶部。
Is there a way to change it so that the most recently-clicked marker popup is on top, instead of that of the most recently-added marker? 有没有一种方法可以更改它,以使最近单击的标记弹出窗口位于顶部,而不是最近添加的标记弹出窗口? I've tried manually changing the z-index in firebug (as a test) but it doesn't bring it to the front.
我已经尝试过手动更改Firebug中的z-index(作为测试),但是并没有将其显示在最前面。 I'd rather avoid deleting and remaking the popup or marker, but it seems to be the only solution I can find.
我宁愿避免删除和重新制作弹出窗口或标记,但这似乎是我能找到的唯一解决方案。
You can use jQuery to make the trick of the zindex
like this 您可以使用jQuery这样的
zindex
技巧
clientesLayer = new OpenLayers.Layer.Vector("PuntosVentas");
feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(vectorFatri.puntos[index][0],vectorFatri.puntos[index][1]),
{description: '<div><div class="popup_title"><h4>'+vectorFatri.imei+'</h4></div><div class="popup_content">'+vectorFatri.fecha[index]+'</div></div>'} ,
{
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWidth: 2,
fillColor: "#FF5500",
fillOpacity: 0.5,
pointRadius: 6,
pointerEvents: "visiblePainted"
}
);
controls = {
selector: new OpenLayers.Control.SelectFeature(clientesLayer, {
onSelect: function (feature) {
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(300,200),
'<div class="markerContent">'+feature.attributes.description+'</div>',
null,
true,
function() { controls['selector'].unselectAll(); }
);
map.addPopup(feature.popup);
{# console.log('me seleccionaron');#}
//jquery trick to make the popup front of everything
$(".olPopup").css("z-index", 10000)
{# setTimeout(function(){$(".olPopup").css("z-index", 10000);}, 2000);#}
},
onUnselect: function (feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
})
}
map.addControl(controls['selector']);
controls['selector'].activate();
clientesLayer.addFeatures(feature);
我无法弄清楚如何可靠地更改z-index并使其正常工作,但是我可以通过完全删除并在需要时创建一个新的map标记克隆来解决我的问题。
call ms.setZIndex(100000);
调用
ms.setZIndex(100000);
where ms
is the container of the marker (an instance of OpenLayers.Layer.Markers
); 其中
ms
是标记的容器( OpenLayers.Layer.Markers
的实例);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.