Javascript OpenLayers:使用外部地图调用添加时无法关闭弹出窗口
我已经编写了一个基本函数,允许我从地图外的链接显示弹出窗口。打开弹出窗口的功能工作正常,但我无法关闭它 演示链接:-单击左侧选项卡式面板中的链接 这里有更多的细节 一张典型的地图在从kml加载的矢量图层“stations”上有大约300个要素。这些在加载时使用Javascript OpenLayers:使用外部地图调用添加时无法关闭弹出窗口,javascript,popup,openlayers,Javascript,Popup,Openlayers,我已经编写了一个基本函数,允许我从地图外的链接显示弹出窗口。打开弹出窗口的功能工作正常,但我无法关闭它 演示链接:-单击左侧选项卡式面板中的链接 这里有更多的细节 一张典型的地图在从kml加载的矢量图层“stations”上有大约300个要素。这些在加载时使用 select = new OpenLayers.Control.SelectFeature(stations); stations.events.on({ "featureselect
select = new OpenLayers.Control.SelectFeature(stations);
stations.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
map.addLayer(stations);
map.addControl(select);
select.activate();
这很好-我可以打开和关闭弹出窗口
通过我的地图外链接,我调用onclick=“showmyppopup([x]),其中[x]是从kml加载的ID属性
function showMyPopup(myID){
for(var a = 0; a < stations.features.length; a++){ //loop through all the features
var feature = stations.features[a];
if (feature.attributes.ID.value == myID) { //until it finds the one with the matching ID attribute
var content = "<h4>" + feature.attributes.name + "</h4>" + feature.attributes.description;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(200,200),
content,
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
}
}
我看了一下OpenLayers的源代码,在Popup.js中有类似的东西
...
var closePopup = callback || function(e) {
this.hide();
OpenLayers.Event.stop(e);
};
OpenLayers.Event.observe(this.closeDiv, "touchend",
OpenLayers.Function.bindAsEventListener(closePopup, this));
OpenLayers.Event.observe(this.closeDiv, "click",
OpenLayers.Function.bindAsEventListener(closePopup, this));
...
在我看来,如果您添加自己的closePopup函数,您需要在代码中调用hide函数。您的ononPopupClose()
函数是:
function onPopupClose(evt) {
select.unselectAll();
}
当您从地图中选择功能并单击弹出窗口的关闭图标时,功能将被取消选择,但弹出窗口尚未关闭。然后,onFeatureUnselect
事件被触发,弹出窗口实际关闭
通过showMyPopup()
函数创建弹出窗口时,您没有选择它。onPopupClose()
被调用,但它不会关闭弹出窗口。onFeatureUnselect
不会被触发
我建议在showmyppopup()
函数中选择功能。featureselected
事件将被触发,弹出窗口由onFeatureSelect()
创建,用户可以使用弹出窗口的关闭图标和地图上的取消选择功能关闭弹出窗口
但遗憾的是,当您使用代码选择功能并尝试使用clickout取消选择它时,OL中可能存在一个错误(或意外行为)。这里介绍:一个可能的修复方法是手动设置SelectControl.handlers.feature.lastFeature
function showMyPopup(myID){
for(var a = 0; a < stations.features.length; a++){ //loop through all the features
var feature = stations.features[a];
if (feature.attributes.ID.value == myID) { //until it finds the one with the matching ID attribute
// select is your SelectFeature control
select.select(feature);
// Fix for unselect bug
select.handlers.feature.lastFeature = feature;
break;
}
}
}
函数showMyPopup(myID){
对于(var a=0;a
很酷的示例,你完美地描述了你的问题-投票结果:-t汉克斯-我在这里发布的第一个问题,所以很高兴知道我做得很好!就是这样-完美。我知道重复整个弹出内容等有问题,但我就是想不起来!有一个小小的“错误”,我需要添加一些内容g在打开新的弹出窗口时关闭任何现有的弹出窗口,但实际上我可以利用它,因为在某些情况下,我有一个起点和终点,所以最好同时显示它们。[编辑:durr,点击勾号!]好的,我发布的第一个问题-现在如何将其标记为答案?”我需要添加一些东西,以便在打开新的弹出窗口时关闭任何现有的弹出窗口”-如果选择.unselectAll(),则所有选定的功能都将被取消选中,而onFeatureUnselect()将被取消选中被触发,将关闭弹出窗口。因此我想您不必担心关闭以前的弹出窗口。谢谢。经过反思,我已经实现了这一点,因为我认为这会带来更好的用户体验。如果我想显示起点和终点,我将编写另一个函数来处理这一点。
function showMyPopup(myID){
for(var a = 0; a < stations.features.length; a++){ //loop through all the features
var feature = stations.features[a];
if (feature.attributes.ID.value == myID) { //until it finds the one with the matching ID attribute
// select is your SelectFeature control
select.select(feature);
// Fix for unselect bug
select.handlers.feature.lastFeature = feature;
break;
}
}
}