GeoMap在更新面板内部无效
我在我的应用程序中使用geomap-linechart api ..我想在下拉选择的索引更改事件中查看地图和图表..如果我把它放在更新面板中它不起作用..它变成空白..但如果我把控件放在更新面板之外,那就很好了..这个问题是否有任何理由或建议?是不是可以在更新面板里面使用geomap?
这是我的代码..
<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);
如果您有任何想法,请帮助..
谢谢..
没有找到相关结果
已邀请:
2 个回复
呢率篓舍烫
鞘垒飘
在Code Behind
当您从下拉列表中选择地图时,请在选定的indexchanged上调用此javascript函数。 把iframe放在你现在放置地图div的地方。并将地图功能放到新页面上。 这个iframe加载了。最后一个函数是函数后面的函数,你必须在那里设置你的新页面 有写地图代码。