移动版谷歌地图:不能触摸和拖动来移动地图

Google Maps mobile: can't touch and drag to move map

本文关键字：移动 拖动 地图 不能 谷歌地图 触摸      更新时间：2023-09-26

我有一个嵌入谷歌地图在我的网站，一切工作正常，除了一件事:在移动设备上，我无法拖动和移动地图(触摸、按住和移动)。它不是移动地图，而是错误地滚动我的网站。

我也不得不说我正在使用fullPage插件和地图是在最后一节。

上面是一些JS代码:

function initializeMap() {
  var myLatlng = new google.maps.LatLng(-34.632587,-58.789862);
  var mapProp = {
    center:myLatlng,
    zoom:15,
    scrollwheel: true,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
  var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:"Somma"
    });
}
$(function() {
  $('#fullpage').fullpage({
    paddingTop: '70px',
    paddingBottom: padBot,
    scrollOverflow: true,
    normalScrollElements: '#googleMap',
    anchors:['home', 'estudio', 'servicios', 'portfolio', 'show-portfolio', 'clientes', 'contacto'],
    onLeave: function(index, nextIndex, direction){
      if(index == 4 && nextIndex == 5 && shouldSkip){
        $.fn.fullpage.moveTo(6);
        return false;
      }
      else if(index == 6 && nextIndex == 5 && shouldSkip){
        $.fn.fullpage.moveTo(4);
        return false;
      }
    },
    afterRender: function () {
      initializeMap();
    },
  });
});

我也有同样的问题。我想会有一个类似于禁用fullpage.js在地图上获得触摸事件的选项，但我找不到它。我最终使用了另一个弹出式窗口(对话框)，其中包含地图来解决问题。所以最终产物是这样的。

这似乎是一个与使用地图iframe相关的bug。

我建议您在用户点击地图时强制在另一个选项卡中打开地图。覆盖它与覆盖或使用代替地图图像。

一般情况下，您可以使用normalScrollElements选项来处理它。

相关文章：