行動端Html5中百度地圖的點擊事件

根據百度地圖官方解釋，在行動端H5 頁面中可監聽下面這4 個事件:

touchstart, touchmove, touchend, longpress

而如果地圖上監聽了click 事件，在行動端是不會執行這個事件裡面的程式碼的。

我之前做一個需求時，我給地圖監聽了touchend 事件，不曾想當我拖動地圖時，也執行了touchend 裡的程式碼。所以需要模擬一個像zepto 中的tap 事件，就能解決這個問題了。

我的程式碼是：

 function initMap(baseData) { var mp = new BMap.Map('map'); var point = new BMap.Point( baseData.data.gardenLongitude, baseData.data.gardenLatitude ); mp.centerAndZoom(point, 15); / / 保存touch 物件資訊var obj = {}; mp.addEventListener('touchstart', function (e) { obj.e = e.changedTouches ? e.changedTouches[0] : e; obj.target = e.target; obj.time = Date.now(); obj.X = obj.e.pageX; obj .Y = obj.e.pageY; }); mp.addEventListener('touchend', function (e) { obj.e = e.changedTouches ? e.changedTouches[0] : e; if ( obj.target === e.target && // 大於750 可看成長按了((Date.now() - obj.time) < 750) && // 應用勾股定理判斷，如果touchstart 的點到touchend的點小於15，就可當成地圖被點擊了(Math.sqrt(Math.pow(obj.X - obj.e.pageX, 2) + Math.pow(obj.Y - obj.e.pageY, 2) ) < 15) ) { // 地圖被點擊了，執行一些操作doSomething(); } }); }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。