Pinch-to-zoom on embedded Google Map zooms whole page
Question
How can I get pinch-to-zoom to work properly in my Google Maps v3-based web app? Right now, pinching on a touchscreen Windows 8 device will zoom the whole page, not the map. I've tried this in both Chrome and Firefox, and it works properly on the Google Maps site, but not on my site.
I have the following meta tag in my <head> element, but it doesn't seem to help. Is there another meta tag I need to add? I checked out the source of the Google Maps site but couldn't find any meta tags that looked relevant.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
2 answers
solution1
0 2016-10-14 14:22:21
this is most likely because you're using an overlay.
you can block pinch and drag by adding this code:
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();
}
});
thanks to https://stackoverflow.com/a/17159809
solution2
-2 2018-06-08 08:32:49
我是windows froms开发的，内置webbrowser用来显示googleMap，但是发现在触摸设备上，双指缩放会导致整个页面缩放，而不是地图缩放，最后我的解决方案如下: 在gpedit.msc中，禁用了浏览器页面缩放功能来实现这个效果，但是我觉得还不是很完美，为什么webbrowser处理页面缩放优先级会被googleMap更高
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.