javascript - 谷歌地图即使在实现后也不可拖动/拖动

Question

谷歌地图即使设为 true 也不可拖动/拖动。

重现步骤:在新选项卡中加载带有 map 的页面，检查并在不执行任何操作的情况下转到移动 View 。现在在移动 View 中左右上下拖动 map ，它将不起作用。

请运行代码片段。

      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

您是否尝试过在实际的移动设备上加载，或者只是通过网络浏览器使用响应式 View ？我将您的代码放在 JSBin 中，并且能够使用 chrome 开发人员工具重现您描述的问题。但是，当我在我的移动设备上加载 JSBin 并尝试拖动时，我收到一条消息说要用两根手指拖动。这与手势处理有关，我将在下一段中解释。

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

  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
    });
  }

这将允许用一根手指而不是两根手指拖动 map 。有关详细信息，请参阅这篇文章:

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

值得一提的是，您需要在选择转到移动/响应式 View 后重新加载页面。如果您不重新加载页面，您将无法正确使用触摸功能。这使得 map 看起来好像无法拖动。重新加载页面后，这不应该发生。我建议在移动设备上尝试，并通过网络浏览器使用响应式 View 。这是 JSBin，因此您可以实时查看它:

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

为了保密你的 key 我从JSBin中取出来了，请替换脚本标签:

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

用您的 API key 替换 MY_API_KEY。然后您将能够看到该功能。选择响应式/移动 View 后，请选择“使用 JS 运行”按钮以重新加载页面。然后您将能够使用触摸功能并看到 map 被拖动。

希望对您有所帮助!