您的位置：首页 > 编程语言 > ASP

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

2013-06-26 20:20 155 查看
在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&Width=800&Height=600&ExportFormat=WindowsPng&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();">。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航