最近在用天地圖API幫同窗作點開發的工做,主要是基於天地圖的API實現違法用地舉報的在線地圖標繪,要實現的效果以下:javascript
因爲是基於天地圖API的TPolygonTool工具實現面積量測和多邊形繪製功能,實現思路以下:java
(1)基於按鈕的鼠標點擊事件開啓多邊形標繪工具;chrome
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瀏覽器環境下,上述思路不能正常工做,表現爲老是遺漏最後一個雙擊點,以下圖:spa
因而可知,IE瀏覽器在對javascript的解釋中,應該是將鼠標雙擊和單擊事件進行了區分,而Chrome瀏覽器的鼠標雙擊事件也會觸發單擊事件,這是兩種瀏覽器對鼠標單擊/雙擊事件的不一樣響應方式。code
所以,若是要在不一樣的瀏覽器環境下保持頁面響應行爲的一致性,問題的解決方法以下:blog
(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控件添加不一樣的事件監聽ip
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); }); } }