Google maps javascript API长按行为被缩放缩放分解
google maps javascript api long press behaviour is broken down by zoom pinch
我知道谷歌地图中没有"长按"事件。但我以某种方式用其他事件的组合模拟了这种行为。按一段时间后,将出现一个带有选项的上下文菜单。但在平板电脑等支持捏缩的设备上,当我用两根手指放大或缩小后,当我停止触摸设备时,菜单会意外出现。两个并发的触摸事件很可能会干扰另一个。任何有建议的人都很感激。以下是相关代码:
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(); });
您可以绑定以下事件来覆盖tablet事件,并在处理程序中执行返回操作。
google.maps.event.addListener(map, "touchstart", function(e){
return;
});
google.maps.event.addListener(map, "touchend", function(e){
return;
});
在这里你可以阅读更多关于touchstart和touchend事件
在对代码进行了一些实验后,我找到了一个解决方案,这不是一个优雅的解决方案,但它可以工作。我编辑了下面一行,包括隐藏上下文菜单。
document.getElementById("main").addEventListener("touchmove", function(){ clearTimeout(sayac); contextMenu.hide(); });
相关文章:
- 更改高贴图的缩放级别
- 在不阻止默认行为的情况下检测IE10中的缩放
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 缩放Raphael/SVG容器以适应所有内容
- 传单缩放控制位置错误
- 在不移动内部文本的情况下缩放元素的效果
- 调整缩放窗口高度提升缩放
- 计算CSS3缩放框在另一个框中的最高位置
- D3.JS向rect添加缩放和列表项
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 将直流图表库中的折线图缩放限制为小时
- 为什么缩放按钮不会显示在照片擦除中
- 动态设置谷歌地图缩放
- 如何缩放像图像一样的元素
- 使用KineticJS变换(移动/缩放/旋转)形状
- 在手机上缩小/缩放滚动图像
- 将时间缩放添加到折线图(Chart.js)
- 当涉及css缩放时,如何获得页面上的点击位置
- 如何缩放地图框传单中的标记单击事件
- Google maps javascript API长按行为被缩放缩放分解