Question

我已经处理了这个问题差不多三天了，所以我想我的失败研究和我制定的概念的反复试验就足够了。这是场景：

我使用开放图层地图。我生成标记。在悬停这些标记时，我需要使用弹出框架对话框显示标签“查看详细信息”。单击“查看详细信息”后，我需要加载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();
}

任何想法如何让我的popup框架云的行为方式与我希望它的行为方式相同？

感谢大家的任何投入。

[编辑] 喜。为了清楚起见，我在我的脚本中声明了一个全局的“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;

...
}

Answer 1

Popup是由很多不同的DIV组成的，不要试图直接改变它们的大小，而是使用适当的弹出方法：setSize（contentSize），它以size为参数;或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();

在openlayers中更新/调整弹出框架云的大小

1 个答案: