Javascript 如何在 Google 地图移动版布局上禁用滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4531052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I disable scrolling on the Google Maps mobile layout?
提问by Brad Birdsall
I am developing mobile sites with Google Maps embedded via the Google Maps API. I have been able to stop certain types of behavior but have been unable to find a good way to stop the map from scrolling as I finger scroll down the page on the iPhone. Here is the code I am using:
我正在开发通过谷歌地图 API 嵌入谷歌地图的移动网站。我已经能够阻止某些类型的行为，但一直无法找到一种好方法来阻止地图滚动，因为我手指向下滚动 iPhone 上的页面。这是我正在使用的代码：
<script>
function initialize() {
var mapElem = document.getElementById("map"),
myOptions = {
zoom: 13,
center: new google.maps.LatLng(41.8965,-84.063),
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
streetViewControl: false,
mapTypeControl: false,
disableDoubleClickZoom: true,
scrollwheel: false,
backgroundColor: '#f2efe9',
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(mapElem, myOptions);
}
</script>
<script src='http://maps.google.com/maps/api/js?sensor=false&callback=initialize'></script>
Thanks in advance.
提前致谢。
回答by Frankey
Validate whether ontouchendis available in document.
验证ontouchend在document.
var myOptions = {
// your other options...
draggable: !("ontouchend" in document)
};
map = new google.maps.Map(mapElem, myOptions);
回答by Mantar
回答by Pablo Cegarra
In your css:
在你的 css 中：
pointer-events: none;
回答by Mike
You can also try a) a server side mobile detection liked mentioned hereand then b) include it in your .php (e.g. header.php or footer.php) file, like so:
您还可以尝试 a)此处提到的服务器端移动检测，然后 b) 将其包含在您的 .php（例如 header.php 或 footer.php）文件中，如下所示：
function isMobile() {
return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}
Embed it in your code:
将其嵌入您的代码中：
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(12.345, 12.345),
scrollwheel: false,
<?php echo(isMobile()) ? 'draggable: false' : ''; ?>
};
Note that this of course only works if you have Google Maps Javascript code embedded in your php file.
请注意，这当然只有在您的 php 文件中嵌入了 Google Maps Javascript 代码时才有效。
回答by brainsexyapril
Add this to your myOptions list:
将此添加到您的 myOptions 列表中：
gestureHandling: 'cooperative'
This is from the Google Maps JS API documentation. I implemented a similar functionality on my mobile maps web app.
这是来自 Google Maps JS API 文档。我在我的移动地图 Web 应用程序上实现了类似的功能。
回答by Victor Catalin Torac
i am a newb, so i give an noob answer:
我是新手，所以我给一个菜鸟答案：
try putting the width at 90%, so you allow space for the finger to go down and up witout touching the map.
尝试将宽度设置为 90%，这样您就可以留出空间让手指在不接触地图的情况下上下移动。
For me it worked :)
对我来说它有效:)
回答by Steve Porter
This is how I solved it with media query responsive techniques.
这就是我用媒体查询响应技术解决它的方法。
HTML at the footer of the page (just above </body>):
页面页脚处的 HTML（正上方</body>）：
<div class="jrespond"></div>
CSS:
CSS：
.jrespond{
width: 30px;
}
@media only screen and (max-width: 991px){
.jrespond{
width: 20px;
}
}
@media only screen and (max-width: 767px){
.jrespond{
width: 10px;
}
}
JavaScript:
JavaScript：
if(jrespond == 10){
// Do mobile function
}
if(jrespond == 20){
// Do tablet function
}
if(jrespond >= 30){
// Do desktop function
}
**/// Google** map snippet
var isDraggable = true;
if(jrespond == 10){
var isDraggable = false;
}
var myOptions = {
zoom: 12,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: isDraggable
}
回答by tommycode
I had the same problem and found the answer in another StackOverflow question. That solution worked for me with my map on my Android using Chrome at least.
我遇到了同样的问题，并在另一个 StackOverflow 问题中找到了答案。该解决方案至少适用于我在 Android 上使用 Chrome 的地图。
Embed Google Maps on page without overriding iPhone scroll behavior
