最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下:
由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能,实现思路如下:
(1)基于按钮的鼠标点击事件开启多边形标绘工具;
1 //开启/关闭违法标绘工具 2 function onClickPolyTool() { 3 var btn = document.getElementById("polyToolBtn"); 4 if (btn.value == "开启违法标绘") { 5 btn.value = "关闭违法标绘"; 6 polygonTool.open(); 7 addMapClick(); 8 } else { 9 btn.value = "开启违法标绘"; 10 polygonTool.close(); 11 removeMapClick(); 12 13 } 14 }
(2)开启多边形标绘工具后,每次在地图上的单击均视为绘制多边形的一个点,该点位转换成经纬度坐标并被记录;
1 function addMapClick() { 2 //移除地图的点击事件 3 removeMapClick(); 4 map.clearOverLays(); 5 points = []; 6 //注册地图的点击事件 7 mapclick = TEvent.addListener(map, "click", function (p, btn) { 8 //将像素坐标转换成经纬度坐标 9 if (btn == 1) { 10 var lnglat = map.fromContainerPixelToLngLat(p); 11 //alert(lnglat.getLng() + "," + lnglat.getLat()); 12 points.push(lnglat); 13 } 14 });15 }
(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); }); } }