谷歌地图javascript api长按行为被缩放捏分解

时间:2013-04-09 00:48:39

标签: javascript google-maps-api-3

我知道Google地图中没有“长按”事件。但我以某种方式使用其他事件的组合模拟了这种行为。按下一段时间后,会出现一个带有选项的上下文菜单。但是,在支持缩放(如平板电脑)的设备中,使用两根手指放大或缩小后,当我停止触摸设备时,菜单会意外显示。两个并发触摸事件可能会扰乱另一个触发事件。任何有建议的人都表示赞赏以下是相关代码:

        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(); });

2 个答案:

答案 0 :(得分:0)

您可以绑定以下事件以覆盖平板电脑事件,只需在处理程序内返回。

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

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

您可以在此处详细了解touchstarttouchend事件。

答案 1 :(得分:0)

在对代码进行一些实验后,我发现了一种解决方法,它不是一个优雅的解决方案,但它可以工作。我编辑了以下行以包含隐藏上下文菜单。

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