zoukankan      html  css  js  c++  java
  • 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;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();">。

  • 相关阅读:
    为什么很多IT公司不喜欢进过培训机构的人呢?
    为何90%的IT技术人员不适合做老大
    一位失足程序员的来信
    你做了哪些事,导致老板下调了对你的评价?
    我的信,你一定要看。
    python 之路,200行Python代码写了个打飞机游戏!
    今天又给即将毕业的学生灌了鸡汤。。。
    收了几个有背景的学生。
    刚收到一个吃瓜群众看了肯定不信的offer!
    关于认识、格局、多维度发展的感触
  • 原文地址:https://www.cnblogs.com/Madfrog-Cainiao/p/3157361.html
Copyright © 2011-2022 走看看