嵌入式谷歌地图上的双指缩放缩放整个页面答案

【问题标题】：Pinch-to-zoom on embedded Google Map zooms whole page嵌入式谷歌地图上的双指缩放缩放整个页面
【发布时间】：2014-05-31 20:19:30
【问题描述】：

如何在基于 Google 地图 v3 的网络应用中让捏合缩放功能正常工作？现在，在触摸屏 Windows 8 设备上捏合会缩放整个页面，而不是地图。我在 Chrome 和 Firefox 中都试过了，它在谷歌地图网站上可以正常工作，但在我的网站上却不行。

我的<head> 元素中有以下元标记，但它似乎没有帮助。我需要添加另一个元标记吗？我查看了 Google 地图网站的来源，但找不到任何看起来相关的元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

【问题讨论】：

标签： javascript html google-maps google-maps-api-3 pinchzoom

【解决方案1】：

这很可能是因为您使用了叠加层。

您可以通过添加以下代码来阻止捏和拖动：

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

感谢https://stackoverflow.com/a/17159809

【讨论】：

【解决方案2】：

我是windows froms开发的，内置webbrowser用来显示googleMap，但是发现在触控设备上，两指缩放会导致整个页面缩放，而不是缩放地图，最后我的解决办法如下：在gpedit.msc中，禁用了浏览器页面缩放功能来实现这个效果，但是我觉得并不完美，为什么webbrowser处理页面缩放的优先级会被googleMap更高

【讨论】：