AJAX Control Toolkit与Virtual Earth的兼容问题
前言：
Virtual Earth作为微软的地图服务，在技术和实用性上与Google Map有的一拼，某些方面还比Google Map做的要好，用的人也越来越多了。但由于其JavaScript的高度封装特性，最近遇到了不少Virtual Earth与ASP.NET AJAX不兼容的情况。案例既多又复杂，本篇通过一个有代表性的例子来讨论两者的兼容 ，希望能帮助遇到此麻烦的开发者解决问题。
问题重现：
下面的代码将一个Virtual Earth地图放在一个AJAX Control Toolkit 的Tab Panel里：
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Virtual Earth Test</title>
<script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?
v=6.2"></script>
<script type="text/javascript">
var map = null;
function GetMap() {
map = new VEMap('myMap');
map.LoadMap();
}
function DoZoomIn(c) {
map.ZoomIn();
}
function DoZoomOut() {
map.ZoomOut();
}
function DoCenterZoom() {
var lat = document.getElementById('txtMapLat').value;
var lon = document.getElementById('txtMapLon').value;
var zoom = document.getElementById('zoomLevel').value;
map.SetCenterAndZoom(new VELatLong(lat, lon), zoom);
}
</script>
</head>
<body onload="GetMap();">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server"
ActiveTabIndex="0" >
<ajaxToolkit:TabPanel runat="server"
HeaderText="Pictures" ID="TabPanel1">
<ContentTemplate>
Pictures
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server"
HeaderText="Location" ID="TabPanel2">
<ContentTemplate>
<div id='myMap' style="position:relative; width:350px;
height:300px;"></div>
<div>Latitude:<input id='txtMapLat'
style='width: 30px' type='text' value='45' /></div>
<div>Longtidude:<input id='txtMapLon'
style='width: 30px' type='text' value='-120' /></div>
<div>
Zoom level:<input id='zoomLevel' type='text'
style='width:15px;' value='5' />
<input type='button' value='Set center &
zoom' onclick='DoCenterZoom();' />
</div>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索map
， function
， document
， virtual
， getelementbyid
Earth
，以便于您获取更多的相关知识。
时间： 2024-08-01 14:51:41