0

ライブラリ サブグリムを使用して Google マップを操作しています。部分的なPostBackが発生したときGMap1にAJAX内の高さと幅を維持する方法は?UpdatePanel

デフォルト.aspx: 

   <div id="mainContent" style="width: 100%; height: 90%;">           
    <div id="content" style="width: 75%; border-left-style: groove; border-width: 1px;
        overflow: auto; float: left;">            
        <asp:UpdatePanel ID="updtepnl_map" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Timer runat="server" ID="timer1" OnTick="upt_Tick" Enabled="False">
                </asp:Timer>
                <cc1:GMap ID="GMap1" runat="server" Key="AIzaSyDPnaewjFYzDu1acq_NorccJ_VNx_nOgio"
                    Height="100%" Width="100%" Version="3" Language="es" enableServerEvents="true" enableRotation="true"
                    OnClick="GMap1_Click" OnMapLoad="GMap1_MapLoad" OnMoveEnd="GMap1_MoveEnd" OnDragEnd="GMap1_DragEnd" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Bttn_Search" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Bttn_startRefresh" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="timer1" EventName="Tick" />
                <asp:AsyncPostBackTrigger ControlID="Center_Map" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="CkBxList_ADFSA" />
                <asp:AsyncPostBackTrigger ControlID="CkBx_ADFSA" />
                <asp:AsyncPostBackTrigger ControlID="CkBx_FEMSA" />
                <asp:AsyncPostBackTrigger ControlID="CkBxList_FEMSA" />
                <asp:AsyncPostBackTrigger ControlID="ImgBttn_SearchByS" />
                <asp:AsyncPostBackTrigger ControlID="ImgBttn_SearchByIP" />
            </Triggers>
        </asp:UpdatePanel>                     
    </div>         
    <div id="menu" style="width: 25%; border-style:hidden; border-width: 1px; overflow: auto;">

    </div>
    <div id="footer">
        ADFSA © 2015
    </div>
</div>

これは、幅と高さをinとに割り当てる私のJavaScript コードです。GMap1window.onloadwindow.resize

var w = window, d = document, e = d.documentElement,
    g = d.getElementsByTagName('body'),
    x = w.innerWidth || w.clientWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight || e.clientHeight || g.clientHeight;

window.onresize = function () {
    var obj3 = document.getElementById('divTop');
    var obj1 = document.getElementById('general'),
        footer = document.getElementById('footer'),
         gmap1 = document.getElementById('GMap1'),
         content= document.getElementById('content');

    y = w.innerHeight || e.clientHeight || g.clientHeight;

    window.content.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';
    window.menu.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';

    window.GMap1.style.height = content.clientHeight - 20 + 'px';
    window.GMap1.style.width = content.clientWidth - 20 + 'px';
    window.GMap1.style.margin = 10 + 'px';
}

window.onload = function () {
    var obj3 = document.getElementById('divTop');
    var obj1 = document.getElementById('general'),
        footer = document.getElementById('footer'),
         gmap1 = document.getElementById('GMap1'),
         content= document.getElementById('content');

    y = w.innerHeight || e.clientHeight || g.clientHeight;

    window.content.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';
    window.menu.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';

    window.GMap1.style.height = content.clientHeight - 20 + 'px';
    window.GMap1.style.width = content.clientWidth - 20 + 'px';
    window.GMap1.style.margin = 10 + 'px';
}
4

1 に答える 1

0

UpdatePanels のコントロールが部分ポストバックでサブスクライブされた JavaScript 関数を失うことについて話している既存の質問がここにあります。ここで何が起こっているのかを理解するために、これを一読することを強くお勧めします。いくつかの異なる解決策が記載されたすばらしい読み物です。

上記のリンクから受け入れられた回答は、jQuery の部分ポストバックでイベントを再バインドする方法を示しています。これにより、コントロールの幅と高さを再度設定できるようになります。jQuery を使用しているのか、単なる JavaScript を使用しているのかはわかりませんが、少なくとも問題に対する洞察を提供するはずです。

やろうとしていることを実現する最も簡単な方法は、まだjQuery を使用していない場合は、使用を開始することです。次に、以下のコードを使用して、イベントを最初にバインドし、部分的なポストバック後に再バインドできます。

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

それが役に立てば幸い！

于 2015-05-15T06:31:27.883 に答える