百度地图开发 随着鼠标移动在状态栏显示鼠标中心的坐标
来源:互联网 发布:银行 数据挖掘 编辑:程序博客网 时间:2024/04/30 20:25
任务描述
鼠标在地图上移动时,会产生一系列mousemove事件,我们可以在客户端通过javascript脚本捕捉到鼠标事件的坐标,这个坐标是基于浏览器窗口的屏幕坐标。如果要显示鼠标点所在的地图坐标,有两种方法:第一,不停地向服务器发送AJAX请求,在服务器端将屏幕坐标转换成地图坐标,然后返回客户端,显示在状态栏。这样的话会有一个问题,就是鼠标拖动的时候会一直不停地发送请求,极大地增加了服务器的负担。当然,我们可以通过设置时间间隔,比如半秒钟更新一次坐标,达到视觉效果与服务器负担之间的均衡。第二种方法就是在每次地图状态更新时,发送一个AJAX请求,获取当前地图的X,Y最大、最小值,保存在客户端,当产生mousemove事件时,根据鼠标的屏幕坐标和地图的四角(左上、左下、右上、右下)坐标,实时地计算鼠标点的地图坐标。
显而易见,第二种方法效率更高。
实现步骤
第一步,定义两个全局变量,用来保存地图的左上角和右下角坐标:
</pre><p> </p><pre class="javascript" name="code">var left_top; var right_bottom;
第二步,给页面的body添加一个onload事件,处理函数如下:
function initShowMapXY(){ left_top = new EsriPoint(); right_bottom = new EsriPoint(); var map = EsriControls.maps["Map0"]; //给地图添加一个update监听器 map.addUpdateListener("showMapXYListener",showMapXYRequest); showMapXYRequest(map); }
在这个函数中,先对全局变量进行了初始化;接着,给地图添加了一个update监听器,这样,每次地图状态更新的时候都会调用这个监听器。第7行代码调用了监听器函数,目的就是在页面初次显示的时候去获取当前的地图坐标,否则,页面初次显示的时候坐标显示异常。
第三步,实现监听器。
function showMapXYRequest(map) { //获取服务器URL var url = EsriUtils.getServerUrl(map.formId); //设置请求参数 var params = "showMapXY=showMapXY&formId="+ map.formId + "&mapId=" + map.id + "&"+ EsriUtils.buildRequestParams(map.formId); //发送AJAX请求并设置响应处理函数 var xmlHttp = EsriUtils.sendAjaxRequest(url, params, true, function() { updateShowMapXYResponse(xmlHttp);}); } function updateShowMapXYResponse(xmlHttp){ if (xmlHttp!== null && xmlHttp.readyState == 4 && xmlHttp.status == 200) { //获取XML响应 var xml = xmlHttp.responseXML; left_top.x = xml.getElementsByTagName("minx").item(0).firstChild.nodeValue; left_top.y = xml.getElementsByTagName("miny").item(0).firstChild.nodeValue; right_bottom.x = xml.getElementsByTagName("maxx").item(0).firstChild.nodeValue; right_bottom.y = xml.getElementsByTagName("maxy").item(0).firstChild.nodeValue; } }
监听器处理函数中想服务器发送了一个AJAX请求,服务器端的请求处理函数就不在这里详细阐述了,处理结果是xml格式的响应,包含四个数据:<minx>,<miny>,<maxx>以及<maxy>,根据这四个数据更新左上角和右下角的坐标。
最后,实现mousemove的处理函数。
function showMapXYonStatus(event){ var mapcell = document.getElementById("EsriMapCell_Map0"); var bounds = EsriUtils.getElementPageBounds(mapcell); var mousePoint = EsriUtils.getXY(event).offset(-bounds.left, -bounds.top); var mapx = mousePoint.x; var mapy = mousePoint.y; if(mapx > 0 && mapx < mapcell.offsetWidth && mapy > 0 && mapy < mapcell.offsetHeight){ window.status = calculateX(mapx,mapcell.offsetWidth) + " , " + calculateY(mapy,mapcell.offsetHeight); } }
function calculateX(screenX,screenWidth){ var mapwidth = right_bottom.x - left_top.x; return parseFloat((screenX*mapwidth)/screenWidth) + parseFloat(left_top.x); }
- 百度地图开发 随着鼠标移动在状态栏显示鼠标中心的坐标
- 随鼠标移动在状态栏显示地图坐标
- 为鼠标移动事件添加新的功能-在状态栏显示鼠标坐标
- 状态栏显示鼠标坐标
- MFC 在状态栏显示当前鼠标坐标
- 在状态栏中显示鼠标位置坐标
- MFC:在状态栏最左边显示鼠标当前的坐标
- MFC:在状态栏最左边显示鼠标当前的坐标
- android 百度地图 marker固定在屏幕中心,动态获取可移动地图的中心坐标
- div随着鼠标移动而移动并获取鼠标坐标
- jquery实现表格随着鼠标的移动而显示亮色
- Silverlight4下bing map实现鼠标移动时显示地图上的经纬坐标
- 鼠标坐标的显示~
- 获取鼠标在Picture控件中的坐标,并显示到对话框的状态栏中
- 获取鼠标在Picture控件中的坐标,并显示到对话框的状态栏中
- 在使用Ribbon的MFC程序状态栏中显示鼠标坐标值
- 在使用Ribbon的MFC程序状态栏中显示鼠标坐标值
- 获取鼠标在Picture控件中的坐标,并显示到对话框的状态栏中
- 总结UI手势
- 线程间通讯机制——深入浅出实现原理
- 比较两个int型数组的大小
- windows8.1体验
- x264 - x264_mb_predict_mv_ref16x16
- 百度地图开发 随着鼠标移动在状态栏显示鼠标中心的坐标
- eclipse 导入别人安卓项目报错
- Android动态设置控件的宽度和高度
- 点阵字体显示系列之三:使用ncurses显示汉字
- System.Runtime.InteropServices.COMException: Exception from HRESULT: 0x800AC472
- Android属性动画工作原理
- TCHAR下的各种函数转换列表
- 关于PendingIntent
- Javascript整除运算