最近在用天地图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. HTML中的文本标签

    <span></span> 请使用 <span> 来组合行内元素,以便通过样式来格式化它们. 注释:span 没有固定的格式表现.当对它应用样式时,它才会产生视觉上 ...

  2. 解决eclipse中启动服务内存溢出问题

    在eclipse中双击tomcat进入参数配置页面,点击Open Launch configuration---Arguments,在VM Arguments的末尾加 -Xms1024M -Xmx20 ...

  3. 仿B站项目(3)页面配置

    页面配置 B站有很多页面,比如说首页啊,动画页啊,音乐页啊,舞蹈页啊,那就从首页开始. 通过观察首页,可以看见有很多模块除了内容之外,在布局颜色等方面都是一样的,所以我可以开发一些模板或者插件,到时候 ...

  4. 再次理解HTTP请求过程[概念原理篇]

    我曾多次阅读http协议,但是理解依然不深,在此,再次阅读,再次理解.加深两点:解析头部信息\r\n,分解头部和主体用\r\n\r\n.之所以一次请求会看到网络里有很多请求,是因为浏览器代替访问了多次 ...

  5. 实例分析JAVA CLASS的文件结构

    今天把之前在Evernote中的笔记重新整理了一下,发上来供对java class 文件结构的有兴趣的同学参考一下. 学习Java的朋友应该都知道Java从刚开始的时候就打着平台无关性的旗号,说“一次 ...

  6. 30 个java编程技巧

    1.return 一个空的集合,而不是 null 如果一个程序返回一个没有任何值的集合,请确保一个空集合返回,而不是空元素.这样你就不用去写一大堆 ”if else” 判断null元素. Java 的 ...

  7. mysql 开发进阶篇系列 23 应用层优化与查询缓存

    一.概述 前面章节介绍了很多数据库的优化措施,但在实际生产环境中,由于数据库服务器本身的性能局限,就必须要对前台的应用来进行优化,使得前台访问数据库的压力能够减到最小. 1. 使用连接池 对于访问数据 ...

  8. 全网最详细的IDEA里如何正确新建普通的Java web项目并发布到Tomcat上运行成功【博主强烈推荐】(类似eclipse里同一个workspace下【一个子项目】并存)(图文详解)

    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 如果是在Myeclipse里,则是File -> new -> ...

  9. 记录解决phpStudy报出403Forbidden问题的方法

    本人输入ip地址+目录去访问PHPTutorial/WWW目录下的某个文件,发生了没有权限访问的问题,导了一个下午,终于解决……不忘在此做个记录 1. 打开phpStudy,点击按键“其他选项菜单”= ...

  10. [NOI 2017]游戏

    Description 题库链接 小 L 计划进行 \(n\) 场游戏,每场游戏使用一张地图,小 L 会选择一辆车在该地图上完成游戏. 小 L 的赛车有三辆,分别用大写字母 A.B.C 表示.地图一共 ...