嵌入式谷歌地图上的双指缩放缩放整个页面
Posted
技术标签:
【中文标题】嵌入式谷歌地图上的双指缩放缩放整个页面【英文标题】：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">
【问题讨论】：
【参考方案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://***.com/a/17159809
【讨论】：
【参考方案2】：我是windows froms开发的，内置webbrowser用来显示googleMap，但是发现在触控设备上，两指缩放会导致整个页面缩放，而不是缩放地图，最后我的解决办法如下： 在gpedit.msc中，禁用了浏览器页面缩放功能来实现这个效果，但是我觉得并不完美，为什么webbrowser处理页面缩放的优先级会被googleMap更高
【讨论】：
以上是关于嵌入式谷歌地图上的双指缩放缩放整个页面的主要内容，如果未能解决你的问题，请参考以下文章