MapXtrem + Asp.net 地图随窗体改变大小

在B/S框架下，MapXtreme都是基于图片的，也就是说在客户端显示的地图实际上都是一张图片。

地图控件

<cc1:MapControl ID="MapControl1" runat="server" Width="800" Height="600"/>

 

在调试模式下，编译后的地图控件
<span id="MapControl1" style="display:inline-block;height:600px;width:800px;"><img width="800px" height="600px" alt=""
 src="MapController.ashx?Command=GetMap&amp;Width=800&amp;Height=600&amp;ExportFormat=WindowsPng&amp;Ran=0.00238378299511214"
 id="MapControl1_Image" /><script language="javascript" type="text/javascript">
    var MapControl1Me = document.getElementById('MapControl1_Image');
    MapControl1Me.mapAlias= '';
    MapControl1Me.exportFormat= 'WindowsPng';

编译后的地图控件分为三部分：<span><img><script>。通过编译后的控件我们就很清楚接下来该如何进行设置。

<%--地图大小随窗体大小改变--%>
    <script type="text/javascript">
        //窗体大小发生改变时触发该事件
        window.onresize = ChangeMapSize;

        //设置地图大小
        function ChangeMapSize()
        {
            var winWidth,winHeight;   
            //获取窗口宽度
             if (window.innerWidth)
                   winWidth = window.innerWidth;
             else if ((document.body) && (document.body.clientWidth))
                   winWidth = document.body.clientWidth;
             //获取窗口高度
             if (window.innerHeight)
                   winHeight = window.innerHeight;
             else if ((document.body) && (document.body.clientHeight))
                   winHeight = document.body.clientHeight;
                   
             //通过深入Document内部对body进行检测，获取窗口大小
             if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
             {
                 winHeight = document.documentElement.clientHeight;
                 winWidth = document.documentElement.clientWidth;
             }
            
            var mapImage = document.getElementById("MapControl1_Image");
            if(mapImage != null)
            {
                //第一步设置<img>控件的大小
                mapImage.width = winWidth;
                mapImage.height = winHeight;  
                
                //第二部设置图片的大小
                //对MapXtreme的Web应用稍微有些了解的应该清楚
                //客户端实际上是通过下面的浏览器从服务器获取图片的
                //以下的相关参数例如width和height是用来设置图片大小的
                var url = "MapController.ashx?Command=GetMap" + "&Width=" + winWidth + "&Height=" + winHeight +
    "&ExportFormat=" + mapImage.exportFormat + "&includeBorder=false&Ran=" + Math.random();
                mapImage.src = url;
            }
            
            //第三步设置<span>控件大小
            var mapControl = document.getElementById("MapControl1");
            if(mapControl != null)
            {
                mapControl.style.width = mapImage.width + 'px';
                mapControl.style.height = mapImage.height + 'px';
            }
        }
   </script>

 

可根据需要考虑是否在添加<body onload="ChangeMapSize();">。

posted @ 2013-06-26 20:20  小菜鸟学编程  阅读(351)  评论(0)    收藏  举报