2

私はこの問題にほぼ 3 日間取り組んできたので、失敗した研究と、策定したコンセプトの試行錯誤で十分だと思います。シナリオは次のとおりです。

オープンレイヤーマップを使用しています。マーカーを生成します。これらのマーカーをホバーすると、ポップアップフレームダイアログを使用して「詳細を表示」というラベルを表示する必要があります。[View Details] をクリックしたら、マップ内のマーカーに対応する特定の場所のトップ ビュー スクリーン ショットである jpg ファイルをロードする必要があります。「View Details」をクリックすると、画像が表示されます。しかし、大きな問題は、ポップアップ フレーム クラウドの 4 つのエッジが散らばっており、そのコンテンツが透明で、画像が真ん中に浮いていることです。

ビューの詳細ラベルにインラインの「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;
}

そして、ポップアップ内にある「View Details」ラベルをクリックするまでに：

<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;

...
}
4

1 に答える 1

2

ポップアップはさまざまな 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();
于 2012-11-23T07:17:25.000 に答える