最近在用天地圖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); }); } }