MapXtrem + Asp.net 地圖隨窗體改變大小

時間 2019-11-18

標籤 mapxtrem asp.net asp 地圖窗體改變大小欄目 ASP 简体版

原文原文鏈接

在B/S框架下，MapXtreme都是基於圖片的，也就是說在客戶端顯示的地圖實際上都是一張圖片。javascript

地圖控件

<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>。經過編譯後的控件咱們就很清楚接下來該如何進行設置。java

<%--地圖大小隨窗體大小改變--%>
    <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();">。瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。