Question

我有一个使用Google Maps API v3的网站，我无法让pinch-zoom属性正常工作。该手势始终执行缩小，而不是缩放 - 缩放。

这是一款具有Touch功能的PC显示器。所以，由于我无法正常工作，我决定禁用该功能。

我使用下面的

取消了触摸事件

document.documentElement.ontouchstart = function() {return false}

这会产生不必要的副作用。此代码取消了整个触摸事件，因此用户无法使用Google地图默认的缩放控件。我尝试将'ontouchstart'更改为'ontouchmove'事件，但这并不妨碍地图缩小。

有关如何禁用此功能的任何想法，或者可能是如何修复pinch-to-zoomIn功能？我可以发布网站网址，但它只是一个普通的谷歌地图，你不会注意到这个问题，除非你有一个启用触摸的显示器。

Answer 1

此处有类似问题的人以这种方式解决了这个问题，也许它会对你有用

var tblock = function (e) {
if (e.touches.length > 1) {
    e.preventDefault()
}

return false;
}

document.body.addEventListener("touchmove", tblock, true);

Google Maps API v3 Disable Pinch to Zoom on iPad Safari

在这里

How to disable pinch in Android MapView

Answer 2

禁用“touchmove”只能解决部分问题，因为Google地图有自己的想法。您的设备将允许您进行缩放（在一定程度上，并且不一致），直到您禁用Google地图自己的可拖动选项，例如。

<?PHP
	
	/* Subject & Email Variables */
	
	$emailSubject = 'Photography Quote';
	$webMaster = 'ryanandelissa@seawardphotography.com';
	
	/* Gathering Data Variables*/
	
	$firstname = $_POST['firstname'];
	$lastname = $_POST['lastname'];
	$email = $_POST['email'];
	$hdyhau = $_POST['hdyhau'];
	$message = $_POST['message'];
	
	$body = <<<EOD
<br><hr><br>
First Name: $firstname <br>
Last Name:  $lastname <br>
Email: $email <br>
How Did You Hear About Us?: $hdyhau <br>
Message: $message <br>
EOD;

	$headers = "From: $email\r\n";
	$headers .= "Content-type: text/html\r\n";
	$headers = mail($webMaster, $emailSubject, $body, $headers);
	
	/* Results Rendered As HTML */
	
	$theResults = <<<EOD
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Contact.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
	
	/*logo*/

img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

/*navbar*/

#wrap{
	text-align: center;
	font-family: "Lora" serif;
	font-size: 13px;
	font-weight: normal;
	padding-right: 48px;
	padding-bottom: 40px;
	
}

.navbar li a{
	display: block;
}

.navbar li{
	display: inline-block;
	list-style: none;
	text-align: left;
	
}

.navbar a{
	text-decoration: none;
	color: #9c9c9c;
	display: block;
	padding: 8px;
	background-color: white;
}

.navbar li ul{
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;
	height: auto;
	
}

.navbar li:hover, a:hover{
	color: black;
}

.navbar li:hover ul{
	display: block;
}	

.navbar li ul li {
	display: block;
}

h1{
	text-align: center;
	font-family: 'Lora' serif;
	font-size: 25px;
	padding-bottom: 30px;
}

input[type=button]{
	border: 2px solid #9c9c9c;
	background-color: white;
	color: #9c9c9c;	
	display: block;
	padding: 10px;
	width: 100px;
	margin-left: auto;
	margin-right: auto;
}

input[type=button]:hover{
	background-color: #9c9c9c;
	color: white;
	border: 2px #9c9c9c;
	padding: 10px;
	height: 41px;
}


/*footer*/

footer{
	text-align: center;
	font-family: "Lora" serif;
	font-size: 10px;
	font-weight: normal;
	padding-top: 30px;
}

	
    </style>
</head>
<body>
	    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12">
	            
	            <img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
	        
	        </div>
	         <div class="clearfix visible-sm-block"></div>
      <div class="clearfix visible-md-block"></div>
       <div class="clearfix visible-lg-block"></div>
	        
	        
            <div class="col-sm-12 col-md-12">

			<div id="wrap">
			<ul class="navbar">
	
		  <li><a href="index.html">HOME</a></li> 
		 <li><a href="">PORTFOLIO</a>
			<ul>
			   <li><a href="wedding.html">WEDDING</a></li>
			   <li><a href="Love.html">LOVE</a></li>
			   
			</ul>         
		 </li>
		 <li><a href="#">ABOUT</a>
			<ul>
			   <li><a href="AboutUs.html">US</a></li>
			</ul>         
		 </li>
		 <li><a href="#">BLOG</a>
		 	<ul>
			 	<li><a href="NewBlogPage3.html">STORIES</a></li>
			 	<li><a href="Archive.html">ARCHIVE</a></li>
		 	</ul>
		 </li>		  		
		 <li><a href="Contact.html">CONTACT</a></li>
	  </ul>			
  	</div>			

	            
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
       
       
       
<div class="col-sm-12 col-md-12">
	       
<h1>Thank you for your inquiry. We'll be in contact shortly.</h1>
	       
</div>   
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
       
<form action="Instagram.html">
<input type="button" value="HOME">
</form>	


<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
         
	
	       
       
       
<div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>

            




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>
EOD;
echo($theResults);


          		

?>

至少在Android 4.4.2上就是这样。

禁用谷歌地图上的缩放缩放[桌面]

2 个答案: