【问题标题】:google maps javascript api long press behaviour is broken down by zoom pinch谷歌地图javascript api长按行为被缩放捏分解
【发布时间】:2013-04-09 22:39:57
【问题描述】:

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

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

【问题讨论】:

    标签: javascript google-maps-api-3


    【解决方案1】:

    您可以绑定以下事件来覆盖平板电脑事件,并在处理程序中执行返回。

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

    您可以在此处阅读有关touchstart 和touchend 事件的更多信息。

    【讨论】:

    • 该解决方案是有道理的,但它不起作用。可能对应的事件名称与 touchstart 和 touchend 不同。我找不到任何与缩放捏合相关的事件
    • 您尝试过“touchmove”事件吗?根据文档,此事件“指示用户何时沿触摸表面移动触摸点”。
    • 我也试过了,但没有效果,还是谢谢你的帮助。
    • 你试过gesturestart吗?
    【解决方案2】:

    在对代码进行了一些试验后,我找到了一种解决方法,它不是一个优雅的解决方案,但它确实有效。我编辑了以下行以包括隐藏上下文菜单。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-02-10
      • 1970-01-01
      • 1970-01-01
      • 2012-03-10
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多