ASP.NET AJAX Advance Tips & Tricks (6) 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>

 

结果，我们可以发现，地图出现了问题，没有被正确载入：

 

解决方案：

在TabContainer 的OnClientActiveTabChanged事件中重新调用GetMap方法生成地图，可以解决此问题：

 

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="GetMap">

 

这次工作正常：

 

整页代码如下：

 

<%@ 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" OnClientActiveTabChanged="GetMap">
            <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>

 

微软经常弄出自己的产品之间不兼容的囧事，不过也难为微软了，有着全球最庞大的客户队伍，产品涉及面极广，并且每个产品都尽量做到极高程度的封装，实在不易。

posted @ 2008-12-25 14:41  LanceZhang  阅读(2221)  评论(2)  编辑  收藏  举报