cai*_*lin 5 html javascript google-maps google-maps-api-3 pinchzoom
如何让捏合缩放功能在基于 Google 地图 v3 的网络应用程序中正常工作?现在,在触摸屏 Windows 8 设备上捏合将缩放整个页面,而不是地图。我已经在 Chrome 和 Firefox 中尝试过此操作,它在 Google 地图网站上可以正常工作,但在我的网站上却不行。
我的元素中有以下元标记<head>
,但它似乎没有帮助。我还需要添加另一个元标记吗?我检查了 Google 地图网站的来源,但找不到任何看起来相关的元标记。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Run Code Online (Sandbox Code Playgroud)
这很可能是因为您使用的是覆盖层。
您可以通过添加以下代码来阻止捏合和拖动:
window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
if ($(e.target).closest('#map').length == 1)
{
blockMenuHeaderScroll = true;
}
});
$(window).on('touchend', function()
{
blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
if (blockMenuHeaderScroll)
{
e.preventDefault();
}
});
Run Code Online (Sandbox Code Playgroud)