最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下:

由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能,实现思路如下:

(1)基于按钮的鼠标点击事件开启多边形标绘工具;

 //开启/关闭违法标绘工具
function onClickPolyTool() {
var btn = document.getElementById("polyToolBtn");
if (btn.value == "开启违法标绘") {
btn.value = "关闭违法标绘";
polygonTool.open();
addMapClick();
} else {
btn.value = "开启违法标绘";
polygonTool.close();
removeMapClick(); }
}

(2)开启多边形标绘工具后,每次在地图上的单击均视为绘制多边形的一个点,该点位转换成经纬度坐标并被记录;

 function addMapClick() {
//移除地图的点击事件
removeMapClick();
map.clearOverLays();
points = [];
//注册地图的点击事件
mapclick = TEvent.addListener(map, "click", function (p, btn) {
//将像素坐标转换成经纬度坐标
if (btn == 1) {
var lnglat = map.fromContainerPixelToLngLat(p);
//alert(lnglat.getLng() + "," + lnglat.getLat());
points.push(lnglat);
}
}); }

(3)双击鼠标,关闭TPolygonTool并结束标绘工作;

上述思路在Chrome浏览器下工作正常,且双击鼠标时鼠标所在的点也被记录并作为多边形最后一个点被记录。然而,在IE浏览器环境下,上述思路不能正常工作,表现为总是遗漏最后一个双击点,如下图:

由此可见,IE浏览器在对javascript的解释中,应该是将鼠标双击和单击事件进行了区分,而Chrome浏览器的鼠标双击事件也会触发单击事件,这是两种浏览器对鼠标单击/双击事件的不同响应方式。

因此,如果要在不同的浏览器环境下保持页面响应行为的一致性,问题的解决方法如下:

(1)加载页面时区分浏览器类型

//浏览器信息
var browserName = '';
var isChrome = -1, isIE = -1;
function getbrowserInfo() {
browserName = navigator.userAgent.toLowerCase();
isChrome = browserName.indexOf("chrome") > -1;
isIE = browserName.indexOf("msie") > -1;
//alert(isChrome);
//alert(isIE);
if (!isChrome && !isIE) {
alert("请使用采用Chrome或IE类型内核的Web浏览器,以获取最佳用户体验!");
}
}

(2)根据浏览器类型为天地图map控件添加不同的事件监听

function addMapClick() {
//移除地图的点击事件
removeMapClick();
map.clearOverLays();
points = [];
//注册地图的点击事件
mapclick = TEvent.addListener(map, "click", function (p, btn) {
//将像素坐标转换成经纬度坐标
if (btn == 1) {
var lnglat = map.fromContainerPixelToLngLat(p);
//alert(lnglat.getLng() + "," + lnglat.getLat());
points.push(lnglat);
}
});
if (isIE) {
mapdbclick = TEvent.addListener(map, "dblclick", function (p) {
//将像素坐标转换成经纬度坐标
var lnglat = map.fromContainerPixelToLngLat(p);
//alert(lnglat.getLng() + "," + lnglat.getLat());
points.push(lnglat);
});
}
}

IE和Chrome执行javascript对鼠标双击事件的不同响应的更多相关文章

  1. javascript模拟鼠标双击事件

    通常我们在做开发的时候需要通过单击切换对立事件,简单做了一个模型. <!DOCTYPE html> <html> <head> <title>javas ...

  2. EasyUI使用之鼠标双击事件

    easyui鼠标双击事件,使用 onDblClickRow(index, row) 事件,在用户双击一行的时候触发,参数包括: index:点击的行的索引值,该索引值从0开始. row:对应于点击行的 ...

  3. MFC鼠标单击截获鼠标双击事件,且无法记录单击的数据的解决方案

    遇到的问题: 鼠标点击会截断鼠标双击的事件,无法保存椭圆的数据.也就是说双击执行的过程是OnLButtonDown,OnLButtonUp,OnLButtonDblClk,OnLButtonUp.并不 ...

  4. WPF 之 鼠标双击事件

    由于WPF中没有鼠标的双击事件,因而只能通过MouseDown事件来模拟.当连续的两次MouseDown事件的时间间隔,没有超过一个设定的时间阈值时,就计算为一个双击事件,并作相应的处理. 利用WPF ...

  5. Silverlight 鼠标双击 事件

    Silverlight 双击事件例子 <UserControl x:Class="MouseDbClick.MainPage" xmlns="http://sche ...

  6. java列表组件鼠标双击事件的实现

    Swing中提供两种列表组件,分别是列表框(JList)和组合框(JComboBox). 一.JList组件 构造方法: public JList():构造一个空的.具有只读模型的JList.publ ...

  7. javascript 处理鼠标右键事件

    使用右键事件 在需要右键的地方加上  onmousedown="if(event.button == 2) alert('点击右键了!');即可   不经意地被一位同事问起在javascri ...

  8. JavaScript一个鼠标滚动事件的实例

    <script type="text/javascript" src="./whenReady.js"></script> <!- ...

  9. Unity 如何检测鼠标双击事件

    代码如下: void OnGUI(){ Event e=Event.current; )) Debug.Log("用户双击了鼠标"); }

随机推荐

  1. Android OpenGL ES 开发(N): OpenGL ES 2.0 机型兼容问题整理

    在使用OpenGL ES做开发的时候,发现不是所有机型对OpenGL的代码都兼容的那么好,同样的代码在某些机型上总是会出现问题,但是在其他手机上就是好的.下面是本人总结的OpengGL 兼容问题: 一 ...

  2. VRRP&HSRP

    HSRP 活跃路由器和备用路由器都会向组播地址 224.0.0.2  UDP 1985  端口发送hello消息. VRRP组中有一台主用路由器(Master),以及一台或多台备用路由器(Backup ...

  3. C#中关于as关键字的使用

    我们在实际编码中有时会用到as关键字来将对象转换为指定类型,与is类型不同的是,is关键字是用于检查对象是否与给定类型兼容,如果兼容就返回true,如果不兼容就返回false.而as关键字会直接进行类 ...

  4. 机器学习基石笔记:05 Training versus Testing

    train:A根据给定训练集D在H中选出g,使得Ein(g)约等于0: test:g在整个输入空间X上的表现要约等于在训练集D上的表现,使得Eout(g)约等于Ein(g). 如果|H|小,更易保证t ...

  5. django 中文入门文档

    django中文入门文档:阅读地址

  6. 写在19年初的后端社招面试经历(两年经验): 蚂蚁 头条 PingCAP

    去年(18年)年底想出来看看机会,最后很幸运地拿到了 PingCAP,今日头条的 offer 以及蚂蚁金服的口头 offer.想着可以总结一下经验,分享一下自己这一段"骑驴找马"过 ...

  7. .Net RPC框架Thrift的用法

      关于Thrift 下面是来自百度百科关于Thrift的介绍: thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和引擎,以构建在 C++, Java, Go ...

  8. java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for com.bjsxt.mapper.PeopleMapper

    报错信息: Type Exception Report Description The server encountered an unexpected condition that prevente ...

  9. RC1015 cannot open include file 'atlres.h'

    fatal error RC1015: cannot open include file 'atlres.h' 问题:此问题是由于rc文件没有找到 atlres.h导致的 (原因不详) 解决:工程   ...

  10. Atom相关资料整理

    官网地址 https://atom.io/ Atom 中文社区 https://atom-china.org/ 常用插件 Emmet 这款插件是用来支持zend-coding,Emmet的前身是大名鼎 ...