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

As stated in the API

Answer 3

在你的css中：

    pointer-events: none;

Answer 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代码时才有效。

Answer 5

将此添加到myOptions列表中：

gestureHandling: 'cooperative'

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

Answer 6

我是新手，所以我给了一个菜鸟回答：

尝试将宽度设置为90％，这样您就可以让手指在触摸地图时向下和向下移动。

对我而言，它有效：）

Answer 7

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

Embed Google Maps on page without overriding iPhone scroll behavior

Answer 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
}

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

8 个答案: