2013-04-09 73 views
1

分解我知道,谷歌地圖中沒有「長按」事件。但我以某種方式使用其他事件的組合來模擬該行爲。按下一段時間後,會出現一個上下文菜單和選項。但是,在支持縮放的設備(如平板電腦)中,使用兩根手指放大或縮小後,當我停止觸摸設備時,菜單意外出現。兩個同時觸摸事件很可能會干擾另一個事件。任何人有建議表示讚賞。以下是相關的代碼:谷歌地圖javascript api長按行爲是通過縮放捏

 var contextMenuOptions={}; 
     contextMenuOptions.classNames={menu:'context_menu', menuSeparator:'context_menu_separator'}; 

     var menuItems=[]; 
     menuItems.push({className:'context_menu_item', eventName:'start_click', label:'From here'}); 
     menuItems.push({className:'context_menu_item', eventName:'end_click', label:'To here'});     
     menuItems.push({className:'context_menu_item', eventName:'from_current_loc', label:'From my location'}); 
     menuItems.push({className:'context_menu_item', eventName:'to_current_loc', label:'To my location'});    
//  menuItems.push({className:'context_menu_item', eventName:'center_map_click', label:'Center map here'}); 
     contextMenuOptions.menuItems=menuItems; 

     // create the ContextMenu object 
     var contextMenu=new ContextMenu(map, contextMenuOptions); 

      google.maps.event.addListener(map, "mousedown", function(event){ 
       contextMenu.hide(); 
       sayac = setTimeout(function(){ contextMenu.show(event.latLng); }, 500);     
      }); 
      // main refers to map container 
      document.getElementById("main").addEventListener("touchend",function(){ clearTimeout(sayac); }); 
      document.getElementById("main").addEventListener("touchmove", function(){ clearTimeout(sayac); }); 
      document.getElementById("main").addEventListener("click",function(e){ e.preventDefault(); }); 

回答

0

您可以綁定以下事件來覆蓋平板電腦事件並僅在處理程序中執行返回。

google.maps.event.addListener(map, "touchstart", function(e){ 
    return; 
}); 

google.maps.event.addListener(map, "touchend", function(e){ 
    return; 
}); 

在這裏,你可以閱讀更多關於touchstarttouchend事件。

+0

該解決方案是有意義的,但它沒有奏效。 Meybe相應的事件名稱與touchstart和touchend不同。我找不到與變焦捏有關的任何事件 – Alp 2013-04-09 13:48:11

+0

您是否嘗試過「touchmove」事件?根據文檔,此事件「指示用戶何時沿着觸摸表面移動觸摸點」。 – ricardohdz 2013-04-09 14:24:49

+0

我也嘗試過,但沒有效果,謝謝無論如何的幫助。 – Alp 2013-04-09 14:35:18

0

經過對代碼的一些試驗後,我發現了一種解決方法,它不是一個優雅的解決方案,但它的工作原理。我編輯了下面一行以包含隱藏上下文菜單。

document.getElementById("main").addEventListener("touchmove", function(){ clearTimeout(sayac); contextMenu.hide(); });