【原创】随鼠标移动显示地图经纬度

最新推荐文章于 2025-08-13 21:05:35 发布

转载最新推荐文章于 2025-08-13 21:05:35 发布 · 502 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/danni5678/archive/2008/05/10/1190900.html

文章标签：

#javascript #ui #ViewUI

本文介绍了一种通过地图Extent改变时，在客户端计算当前鼠标位置经纬度的方法。具体步骤包括：为Map控件添加鼠标滑动事件；在Extent改变时传递XMin、YMin、Width和Height值到客户端；最后，客户端通过计算获得当前点的经纬度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路是在地图的Extent的改变的时候，将Extent的XMin,YMin,Width,Height的值传到客户端，客户端调再根据这几个值经过换算得到当前点的经纬度。这样只有在Extent改变是才与服务器交互，经纬度的获取都是在客户端计算所得。

1.为Map控件添加鼠标滑动的客户端事件

Map1.Attributes.Add("onmousemove", "GetPosition(event)");

2.在Map的ExtentChanged事件中将相应的值传到客户端

protected void Map1_ExtentChanged(object sender, ESRI.ArcGIS.ADF.Web.UI.WebControls.ExtentEventArgs args)

{

String script;

script = "lat=" + args.NewExtent.YMin.ToString() + ";lon=" + args.NewExtent.XMin.ToString() + ";latWidth="+args.NewExtent.Width.ToString()+";lonHeight="+args.NewExtent.Height.ToString()+";";

ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult s = new ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult(null, null, "javascript", script);

Map1.CallbackResults.Add(s);

}

3.添加客户端处理事件

var lon='0.00';//经度

var lat='0.00';//纬度

var lonHeight='0.00'//高度

var latWidth='0.00'//宽度

//------------------------------------

function GetPosition(evt)

{

evt=(evt)?evt:window.event;

var map=document.getElementById('Map1');

var mapx=getLeft(map);

var mapy=getTop(map);

var maph=map.clientHeight;

var mapw=map.clientWidth;

var mapleftbottom=maph+mapy;

var posi=document.getElementById('position');

var evtx=(evt.x)?evt.x:evt.pageX;

var evty=(evt.y)?evt.y:evt.pageY;

var y=parseFloat(lat); //纬度

var x=parseFloat(lon); //经度

var height=parseFloat(lonHeight);

var width=parseFloat(latWidth);

var ratex=(evtx-mapx)/mapw;

var ratey=(mapleftbottom-evty)/maph;

var templon=Math.round((width*ratex+x)*100)/100;

var templat=Math.round((height*ratey+y)*100)/100;

posi.innerHTML='经度:'+templon+' '+'纬度:'+templat;

}

//获取元素的纵坐标

function getTop(e)

{

var offset=e.offsetTop;

if(e.offsetParent!=null) offset+=getTop(e.offsetParent);

return offset;

}

//-----------------------------

//获取元素的横坐标

function getLeft(e)

{

var offset=e.offsetLeft;

if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);

return offset;

}

转载于:https://www.cnblogs.com/danni5678/archive/2008/05/10/1190900.html