Google地图即使在使其成为现实之后也是不可拖/拖的。

Question

Google地图即使在使其成为现实之后也是不可拖动的。

复制步骤:在新选项卡中加载带有地图的页面，检查并进入移动视图而不执行任何操作。现在，在移动视图中，将地图左右向上拖动，它将无法工作.

请运行代码段。

​

      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8,
          draggable: true
        });
      }

#map {
        height: 90%;
      }
      html, body {
        height: 90%;
        margin: 0;
        padding: 0;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCk0vq10rCc-wxeYQb-E5IoB-E3WBtIMxA&callback=initMap"
    async defer></script>
<div id="map" data-role="page"></div>https://stackoverflow.com/questions/ask#

​

Answer 1

您是否尝试过在实际的移动设备上加载，或者仅仅通过web浏览器使用响应性视图？我将您的代码放在一个JSBin中，并能够使用工具再现您描述的问题。然而，当我在移动设备上加载JSBin并试图拖动时，我收到了一条消息:使用两个手指拖动。这与手势处理有关，我将在下一段中解释。

Google API在MapOptions对象中提供了一个gestureHandling选项，您可以使用它来优化用户在与地图交互时的体验。我相信您想要使用的设置是贪婪的，这允许用一个手指拖动地图，您可以这样做：

  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8,
      gestureHandling: 'greedy',
      draggable: true
    });
  }

这将允许用一个手指而不是两个手指拖动地图。有关更多信息，请参见本文：

https://developers.google.com/maps/documentation/javascript/interaction#gesture-handling

值得一提的是，在选择移动/响应视图之后，需要重新加载页面。如果您不重新加载页面，您将无法正确使用触摸功能。这使得地图看起来好像不能被拖走。一旦重新加载页面，这种情况就不会发生。我建议在移动设备上和通过web浏览器使用响应性视图两种方式进行尝试。这里是JSBin，您可以实时看到它：

http://jsbin.com/tuvobipozi/1/edit?html,css,js,output

为了使您的密钥保持私密性，我将其从JSBin中删除，请替换脚本标记：

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"
async defer></script>

用API键替换MY_API_KEY。然后，您将能够看到该功能。一旦您选择了响应/移动视图，请选择“Run”按钮来重新加载页面。然后，您将能够使用触摸功能，并看到地图被拖动。

我希望这能帮到你!