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

我正在开发通过谷歌地图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>

函数初始化（）{
var mapElem=document.getElementById（“映射”），
myOptions={
缩放：13，
中心：新google.maps.LatLng（41.8965，-84.063），
导航控制：对，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL，
位置：google.maps.ControlPosition.TOP\u右
},
街景控制：错误，
mapTypeControl:false，
禁用双击缩放：真，
滚轮：错误，
背景颜色：“#f2efe9”，
mapTypeId:google.maps.mapTypeId.ROADMAP
},
map=新的google.maps.map（mapElem，myOptions）；
}

提前谢谢

draggable: false

---

我也遇到了同样的问题，在另一个问题中找到了答案。这个解决方案至少在我的Android上使用Chrome的地图上对我有效

您也可以试试 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' : ''; ?>
    };

var映射选项={
缩放：18，
中心：新google.maps.LatLng（12.345，12.345），
滚轮：错误，
};

---

请注意，这当然只适用于在php文件中嵌入Google Maps Javascript代码的情况。

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

页面页脚处的HTML（就在

上方）：

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
}

---

验证

文档

中是否有

ontouchend

可用

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

---

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

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

对我来说，它起作用了：）

在你的css中：

    pointer-events: none;

---

将此项添加到myOptions列表中：

gestureHandling: 'cooperative'

---

这来自谷歌地图JSAPI文档。我在我的移动地图web应用程序上实现了类似的功能。

这会删除实时拖动功能，但不会阻止地图删除默认的触摸移动。我需要地图嵌入停止接受触摸移动事件。我的第一个建议是只在视图上禁用触摸事件。不过，假设您使用的是多平台，我可以建议您使用静态地图吗？关于这个主题的博客文章：看起来你把括号放错地方了。你的意思是

？嗨，甲壳虫，我的例子中的括号应该是正确的（建议避免“堆叠”三元表达式。当在一个语句中使用多个三元运算符时，PHP的行为是不明显的。另请参阅）最佳答案！谢谢这对我已经不起作用了。我在几个运行windows 10和chrome的不同计算机上看到过这种情况。这是到目前为止最好的答案-使用媒体查询而不是js对其进行外部排序。我通常避免使用这种方法，因为它还不在HTML5标准中，尽管大多数浏览器都将此功能从SVG扩展到HTML。请参阅：不幸的是，此解决方案禁用了地图上的所有触摸控制，而不仅仅是根据OP的问题滚动。缩放按钮以及谷歌地图上显示的所有其他链接（如谷歌评论、联系人详细信息、切换地图模式视图和“查看更大的地图”）都变得毫无用处，因此对大多数人来说，这不是一个很好的解决方案。我认为，寻找其他解决方案也是有效的

    pointer-events: none;

gestureHandling: 'cooperative'