javascript - 即使将Google map 设为true，也无法对其进行拖动/拖动

即使置为真实，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#

最佳答案

您是否尝试过在实际的移动设备上进行加载，还是仅通过Web浏览器使用响应视图？我将您的代码放在JSBin中，并能够使用chrome开发人员工具重现您描述的问题。但是，当我在移动设备上加载JSBin并尝试拖动时，我收到一条消息，提示要用两个手指拖动。这与手势处理有关，我将在下一段中说明。

Google Maps JavaScript API在MapOptions对象中提供了一个handleHandling选项，您可以用来优化与地图进行交互时用户的体验。我相信您要使用的设置是贪婪的，这允许用一根手指拖动地图，您可以执行以下操作：

  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

值得一提的是，选择进入移动/响应视图后，您需要重新加载页面。如果您不重新加载页面，则将无法正确使用触摸功能。这样就好像无法拖动地图。重新加载页面后，就不会再发生这种情况。我建议您同时在移动设备上尝试并通过网络浏览器使用响应视图。这是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。然后，您将能够看到该功能。选择响应式/移动视图后，请选择“使用JS运行”按钮以重新加载页面。然后，您将能够使用触摸功能并看到地图被拖动。

我希望这有帮助！