最近在用天地图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. Javascript高级编程学习笔记(9)—— 执行环境

    今天主要讲一下,JS底层的一些东西,这些东西不太好举例(应该是我水平不够) 望大家多多海涵,比心心 执行环境 执行环境(执行上下文,全文使用执行环境 )是JS中最为重要的一个概念,执行环境决定了,变量 ...

  2. elasticsearch学习之根据发布时间设置衰减函数

    衰减函数decay functionion 高斯衰减 GET _search { "_source": ["title","release_date& ...

  3. OO第一单元自白

    Homework 1  简单多项式导函数 对于初次接触的OO,第一次作业已经可以体会到其与面向过程的C语言之间的差别. 我的想法是,建立了Multinomial和Monomial 两个类,分别能够实现 ...

  4. Win10手记-为应用集成SQLite(二)

    接上篇内容,这里给大家分享我的辅助访问类,采用了异步方法,封装了常用的访问操作,一些操作还是纯CLI的. SQLiteDBManager using System; using System.Coll ...

  5. win10 + cuda8.0 + caffe SSD + vs2015 + python3

    一.下载 git clone https://github.com/runhang/caffe-ssd.git cd caffe-ssd 1. 修改 build_win.cmd if !PYTHON_ ...

  6. python买卖股票的最佳时机--贪心/蛮力算法简介

    开始刷leetcode算法题 今天做的是“买卖股票的最佳时机” 题目要求 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更 ...

  7. UIAutomatorViewer增加xpath查看

    原来的UIAutomatorViewer是没有xpath查看路径的,下载如下jar包: https://pan.baidu.com/s/1jpr6m0OOce7CtnDE_lIJ9A 密码:cja0 ...

  8. 开源API测试工具 Hitchhiker v0.10 - 中文版

    Hitchhiker 是一款开源的支持多人协作的 Restful Api 测试工具,支持自动化测试, 数据对比,压力测试,支持脚本定制请求,可以轻松部署到本地,和你的team成员一起协作测试Api. ...

  9. Maven项目打包成可执行Jar文件

    在使用Maven完成项目以后,如果需要打包成可执行的Jar文件,我们通过eclipse的导出很麻烦,还得指定入口文件的位置,还得说明依赖的jar包,既然都使用Maven了,很重要的一个目的就是让这些繁 ...

  10. 基于redis的分布式ID生成器

    基于redis的分布式ID生成器