如何禁用Google地图移动版面上的滚动？

Question

我正在使用Google Maps API嵌入Google地图开发移动网站.我已经能够阻止某些类型的行为,但是当我用手指向下滚动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>

提前致谢.

Answer 1

验证是否ontouchend可用document.

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

Answer 2

draggable: false

正如API中所述

Answer 3

在你的CSS中:

    pointer-events: none;

Answer 4

您也可以尝试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"]);
}

将其嵌入您的代码中:

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

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

Answer 5

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

gestureHandling: 'cooperative'

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