0

アプリケーションで geomap-linechart API を使用しています。ドロップダウンで選択したインデックス変更イベントでマップとチャートを表示したいです。更新パネル内に配置すると機能しません。空白になります。しかし、更新パネルの外にコントロールを配置するとうまくいきます..この問題について何か理由や提案はありますか?? 更新パネル内でジオマップを使用することはできませんか??

これは私のコードです..

<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABCDEFG' type='text/javascript'></script>
<script type='text/javascript'>

google.load('visualization', '1', { 'packages': ['geomap'], 'language': 'fr'});        

    var countryCode;

// マップ関数

    function DrawWorldMap(country, lat, lang, name, count, usercount, user, bandwidth, vtitle, htitle, title1, title2) {
        try {
            var data = new google.visualization.DataTable();
            data.addRows(count);
            data.addColumn('string', 'Country');
            data.addColumn('number', 'BandWidth');
            var contry = country.split(',');
            var band = bandwidth.split(',');

            for (var i = 0; i < count; i++) {
                data.setValue(i, 0, contry[i]);
            }
            for (var h = 0; h < count; h++) {
                data.setValue(h, 1, Number(band[h]));
            }
            var options = {};
            options['dataMode'] = 'regions';

            var container = document.getElementById('<%=map_canvas.ClientID%>');
            var geomap = new google.visualization.GeoMap(container);
            geomap.draw(data, options);
            var lati = lat;
            var langi = lang;
            var loop = count;
            google.visualization.events.addListener(
    geomap, 'regionClick', function (e) {
        countryCode = e['region'];
        CreateCountryMap(lati, langi, name, loop, usercount, country, user, bandwidth, vtitle, htitle, title1, title2);

    });

        }            
        catch (exception) {
            alert('drawworldmap: ' + exception);
        } 
        drawVisualization(user, bandwidth, usercount, vtitle, htitle, title1, title2); // here am calling the chart function..
    }

//チャート関数

   function drawVisualization(User, Bandwidth, counts, vtitle, htitle, title1, title2) {
        try {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', title1);
            data.addColumn('number', title2);
            var username = User.split(',');
            var BandWidth = Bandwidth.split(',');
            for (var i = 0; i < counts; i++) {
                data.addRow([String(username[i]), Number(BandWidth[i])]);
            }

            // Create and draw the visualization.
            new google.visualization.LineChart(document.getElementById('<%=visualization.ClientID%>')).
        draw(data, { curveType: "function", pointSize: 5, title: 'User Chart', titlePosition: 'out',
            width: 400, height: 350, backgroundColor: 'AliceBlue',
            vAxis: { maxValue: 100, title: vtitle }, fontSize: 8, hAxis: { title: htitle }
        }
            );
        }
        catch (exception) {
            alert(exception);
        }
    }       

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<asp:DropDownList ID="ddlusername" runat="server" AutoPostBack="true" 
        OnSelectedIndexChanged="ddlusername_SelectedIndexChanged" Height="17px" 
        Width="132px">   </asp:DropDownList>    

<div id="visualization" align="center" style="border: thin solid grey;" runat="server"> </div>

<div id='map_canvas' style="border: thin solid grey;" align="center" runat="server"> </div>

<asp:Label ID="lblmap" runat="server"></asp:Label>

</ContentTemplate>
</asp:UpdatePanel>

そして、私はこのようなコードビハインドから drawworldmap 関数を呼び出しています..

   ScriptManager.RegisterStartupScript(lblmap, this.GetType(), "js2", "google.setOnLoadCallback(DrawWorldMap('" + contry + "','" + city + "','" + langitude + "','" + longitude + "'," + count + "," + usercount + ",'" + username + "','" + bandwidth + "','Bandwidth','UserName','User','BandWidth'));", true);

何かアイデアがあれば助けてください..

ありがとうございました..

4

2 に答える 2

0 
<script type="text/javascript">
      function ActiveTabChanged(sender, e) {
        if (sender.get_activeTab().get_headerText().toLowerCase().indexOf('contact') > -1) {
            var FrameSrc = ('<%=SetFrameSrc() %>');
            document.getElementById('<%=ifrmMap.ClientID %>').src = FrameSrc;
        }   
    }
</script>

<iframe id="ifrmMap" runat="server" height="324px" width="462px" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

コードビハインドで

/// <summary>
        /// Get the iframe source when contact tab active.
        /// </summary>
        /// <returns></returns>
        public string SetFrameSrc()
        {
            string strSrc = string.Empty;
            if (!string.IsNullOrEmpty(queryID))
            {
                strSrc = //Add Google Map New page url;
            }
            return strSrc;
        }

ドロップダウンからマップを選択すると、選択した indexchanged でこの JavaScript 関数が呼び出されます。今マップのdivを置く場所にiframeを置きます。マップ機能を新しいページに配置します。これはこの iframe にロードされます。最後の関数はコード ビハインド関数で、マップ コードを記述した新しいページを設定する必要があります。

于 2011-02-17T10:47:11.757 に答える
0

最初の解決策は、javascript の initMap() 関数のように、再度 Google マップをロードする関数を呼び出すことです。2番目の解決策は、マップからiframeページを作成し、マップのdivをクリックするとロードすることです。

あなたの問題は更新パネルにあり、正しくロードされていません。

so.マップの div を再度クリックすると、最初のソリューションでマップがロードされます。それ以外の場合は、iframe をロードして 2 番目のソリューションを使用してください。

私は自分のプロジェクトでこの両方を行いました。

これがあなたを助けることを願っています。

于 2011-02-16T09:39:35.077 に答える