最近在用天地图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 经验之文件下载

    在Android 开发中,我们肯定会接触到下载需求,那么如何通过技术实现呢? 一.简单实现: 通过了解HTTP原理,我们应该可以知道,HTTP学习的时候,可以通过HTTPGET方式来进行文件下载: n ...

  2. 4.json解析

    格式 {"name":"zhangsan", "age":18, "books":[{"name": ...

  3. MySQL:change buffer

    1. 概念 Innodb维护了一个缓存区域叫做Buffer Pool,用来缓存数据和索引在内存中.其大小通过参数 innodb_buffer_pool_size 控制: change buffer 是 ...

  4. linux下的初始化系统systemd简科普

    systemd是什么?名字很奇怪,不认识. 扒一扒wiki,你就会知道我是谁了? 在下有眼不识泰山,原来你就是盘古老爷爷用的开天辟地大斧头啊. 贫穷不可怕,可怕的是贫穷限制了你的想象--------- ...

  5. 机器学习技法笔记:02 Dual Support Vector Machine

    Roadmap Motivation of Dual SVM Lagrange Dual SVM Solving Dual SVM Messages behind Dual SVM Summary

  6. Spring Boot Runner启动器

    Runner启动器 如果你想在Spring Boot启动的时候运行一些特定的代码,你可以实现接口ApplicationRunner或者CommandLineRunner,这两个接口实现方式一样,它们都 ...

  7. Python常用模块time & datetime &random 模块

    时间模块前言 在Python中,与时间处理有关的模块就包括:time,datetime 一.在Python中,通常有这几种方式来表示时间: 时间戳 格式化的时间字符串 元组(struct_time)共 ...

  8. 如何理解 Linux 中的 load averages

    原文:https://mp.weixin.qq.com/s?src=11&timestamp=1533697106&ver=1047&signature=poqrJFfcNAB ...

  9. mysql 开发进阶篇系列 38 mysql日志之错误日志log-error

    一.mysql日志概述 在mysql中,有4种不同的日志,分别是错误日志,二进制日志(binlog日志),查询日志,慢查询日志.这此日志记录着数据库在不同方面的踪迹(区别sql server里只有er ...

  10. cmd命令窗口连接mysql的命令大全

    连接:mysql -h主机地址 -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样)断开:exit (回车) 创建授权:grant select on 数据库.* to 用户名@登 ...