我已经处理这个问题将近三天了,所以我想我失败的研究和对我提出的概念的反复尝试已经足够了。这是一个场景:
我使用开放层地图。我生成标记。使用这些标记悬停时,我需要使用弹出框对话框显示标签"查看详细信息"。单击"查看详细信息"后,我需要加载jpg文件,该文件是与我的地图中的标记相对应的特定位置的俯视屏幕截图。我可以成功地做到,我点击"查看详细信息",我可以显示图像。但最大的问题是,我的弹出框云的四个边缘分散在周围,其内容是透明的,图像漂浮在在中间。
我为视图细节标签附加了一个内联的"onclick属性":
fromImage = '<img src="'+data['map_locations'][key]['image_url']+'" class="ImageFrom"></img><label type="button" class="location_image_container" onclick="show_location_details()">VIEW DETAILS</label>';
这是每次点击时它调用的函数
function show_location_details(){
jQuery('#cloud_dialog_details_link').hide();
jQuery('.olFramedCloudPopupContent').width(500);
jQuery('.olFramedCloudPopupContent').height(400);
jQuery('.olPopup').height(400);
jQuery('.olPopup').width(500);
jQuery(".ImageFrom").show();
}
你知道我该如何让弹出框云按照我想要的方式运行吗?
谢谢大家的意见。
[编辑]你好为了说明问题,我在我的脚本中声明了一个全局"AutoSizeFramedCloud">
AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud,{'autosize':true});
在一个函数中,我设置了它的初始构造函数:
function addMarkers(lonlat, marker_name, description, id, label, subgroup, category){
var ll,popupClass,popupContentHTML,marker,popupContentDiv;
ll = lonlat;
popupClass = AutoSizeFramedCloud;
popupContentHTML = description+label;
marker = marker_name;
popupContentDiv = id;
popupGroupDiv = subgroup;
}
当我点击弹出窗口中的"查看详细信息"标签时:
<label type="button" class="location_image_container" onclick="show_location_details()">VIEW DETAILS</label>
我正在调用函数show_location_details()
function show_location_details(){
this.popup.setSize(new OpenLayers.Size(500, 400));
//alert(jQuery('popup.contentDiv').val());
jQuery('#cloud_dialog_details_link').hide();
jQuery('.olPopup').width(600);
jQuery('.olFramedCloudPopupContent').width(480);
jQuery('.olPopup').height(500);
jQuery('.olFramedCloudPopupContent').height(380);
jQuery(".ImageFrom").show();
}
然而,它给了我一个错误:
Uncaught TypeError: Cannot call method 'setSize' of undefined
[编辑]
以下是我如何创建弹出的功能
function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow, marker_name, popupContentDiv, popupGroupDiv, category){
var feature = new OpenLayers.Feature(marker_name, ll);
feature.closeBox = closeBox;
feature.popupClass = popupClass;
feature.data.popupContentHTML = popupContentHTML;
//feature.data.overflow = (overflow) ? "auto":"hidden";
feature.data.icon = new OpenLayers.Icon("./img/icon/blank.png", size);
feature.data.contentDiv = popupContentDiv;
feature.data.groupDiv = popupGroupDiv;
...
}
Popup是由许多不同的div组成的,不要试图直接改变它们的大小,而是使用适当的弹出方法:setSize(contentSize),它以大小为参数;或updateSize(),它会自动调整弹出窗口的大小以适应其内容:http://dev.openlayers.org/docs/files/OpenLayers/Popup-js.html#OpenLayers.Popup.setSize
var myPopup = new OpenLayers.Popup.FramedCloud({
...
myPopup.setSize(new OpenLayers.Size(500, 400));
// Or...
// myPopup.updateSize();