Question

如何在基于Google Maps v3的网络应用中正常使用缩放功能？现在，捏在触摸屏上的Windows 8设备将缩放整个页面，而不是地图。我在Chrome和Firefox上都尝试过这种方法，它可以在Google地图网站上正常使用，但不能在我的网站上使用。

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

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

Answer 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

Answer 2

我来自windows开发，内置webbrowser用于显示googleMap，但发现在触摸设备上，双指缩放会导致整个页面缩放，而不是缩放地图，最后我的解决方案如下：在 gpedit.msc 中，浏览器页面缩放功能被禁用以实现此效果，但我认为它并不完美，为什么webbrowser处理页面缩放优先级会更高googleMap

嵌入式Google地图上的缩放可缩放整个页面

2 个答案: