Question

Google地图即使在真实之后也无法拖动/拖动。

重现的步骤：在新标签页中加载包含地图的页面，检查并转到移动视图而不做任何事情。现在在移动视图中左右上下拖动地图，它将无法正常工作。

请运行代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

<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#

＆＃13;

Answer 1

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

Google Maps JavaScript 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

值得一提的是，您需要在选择转到移动/响应式视图后重新加载页面。如果您不重新加载页面，您将无法正确使用触摸功能。这使得看起来好像无法拖动地图。一旦你重新加载页面，这不应该发生。我建议在移动设备上尝试并通过网络浏览器使用响应式视图。这是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运行”按钮重新加载页面。然后，您将能够使用触摸功能并查看地图被拖动。

我希望这有帮助！

即使将Google地图设为真，Google地图也无法拖动/拖动

1 个答案: