如何禁用谷歌地图移动布局上的滚动？答案

【问题标题】：How can I disable scrolling on the Google Maps mobile layout?如何禁用谷歌地图移动布局上的滚动？
【发布时间】：2010-12-25 17:42:48
【问题描述】：

我正在开发通过 Google Maps API 嵌入 Google Maps 的移动网站。我已经能够阻止某些类型的行为，但是当我在 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>

提前致谢。

【问题讨论】：

关于该主题的博文：Disable Google Maps scrolling on mobile layout

标签： javascript google-maps mobile

【解决方案1】：

验证ontouchend 是否在document 中可用。

var myOptions = {
    // your other options...
    draggable: !("ontouchend" in document)
};
map = new google.maps.Map(mapElem, myOptions);

【讨论】：

最佳答案！谢谢！
这对我不起作用了。我已经在几台运行 Windows 10 的不同计算机上看到了，chrome 也有。

【解决方案2】：

draggable: false

As stated in the API

【讨论】：

删除实时拖动功能但不会阻止地图删除默认的触摸移动。我需要嵌入地图以停止接受触摸移动事件。
我的第一个建议是禁用视图上的触摸事件。但是，假设您正在使用多平台，我可以建议使用静态地图吗？ code.google.com/apis/maps/documentation/staticmaps

【解决方案3】：

在你的 CSS 中：

    pointer-events: none;

【讨论】：

这是迄今为止最好的答案 - 使用媒体查询而不是 js 来排序
虽然它可以工作，但我通常会避免使用这种方法，因为它还不是 HTML5 标准，尽管大多数浏览器无论如何都会将此功能从 SVG 扩展到 HTML。见：developer.mozilla.org/en-US/docs/Web/CSS/…
不幸的是，这个解决方案禁用了地图的所有触摸控件，而不仅仅是按照 OP 的问题滚动。缩放按钮以及谷歌地图上显示的所有其他链接（如谷歌评论、联系方式、切换地图模式视图和“查看更大的地图”）都变得无用，因此对于大多数人来说不是一个很好的解决方案。

【解决方案4】：

你也可以试试 a) 服务器端移动检测喜欢提到here 然后 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"]);
}

将其嵌入您的代码中：

var mapOptions = {
        zoom: 18,
        center: new google.maps.LatLng(12.345, 12.345),
        scrollwheel: false,
        <?php echo(isMobile()) ? 'draggable: false' : ''; ?>
    };

请注意，这当然只有在您的 php 文件中嵌入了 Google Maps Javascript 代码时才有效。

【讨论】：

您好像把括号放错了地方。你的意思是<?php echo(isMobile() ? 'draggable: false' : ''); ?>？
嗨甲壳虫，我的例子中的括号应该是正确的（建议避免“堆叠”三元表达式。在单个语句中使用多个三元运算符时 PHP 的行为是不明显的。请另见php.net/manual/en/language.operators.comparison.php)

【解决方案5】：

将此添加到您的 myOptions 列表中：

gestureHandling: 'cooperative'

这来自 Google Maps JS API 文档。我在我的移动地图网络应用上实现了类似的功能。

【讨论】：

【解决方案6】：

我是新手，所以我给出一个菜鸟的答案：

尝试将宽度设置为 90%，这样就可以让手指在不触碰地图的情况下上下移动。

对我来说它有效:)

【讨论】：

我认为寻找替代解决方案总是有效的

【解决方案7】：

我遇到了同样的问题，并在另一个 StackOverflow 问题中找到了答案。该解决方案至少适用于我在 Android 上使用 Chrome 的地图。

Embed Google Maps on page without overriding iPhone scroll behavior

【讨论】：

【解决方案8】：

这就是我使用媒体查询响应技术解决它的方法。

页面底部的 HTML（就在 </body> 上方）：

<div class="jrespond"></div>

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：

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
}

【讨论】：