谷歌地图 - 用鼠标滚动地图缩放请求按Ctrl键

时间:2017-11-28 12:30:25

标签: css google-maps zoom

以下是我用于发布Google地图的代码。 我有一个问题,如果有人调整窗口大小在这种情况下低于1095px。 在这种情况下,只有按下ctrl按钮才能使用鼠标滚轮进行缩放。 有没有办法保持html min-with:1150px并禁用这个要求ctrl的功能。

选项gestureHandling:'贪心'很熟悉,但如果可能的话,我想解决这个问题。 谢谢!

 <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
          /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */
          #map {
            width: 100%;
            height: 100%;
            position: fixed !important;
            left: 0;
            z-index: 2;
            top: 0;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            min-width:1150px;
            width: auto;
            margin: 0;
            padding: 0;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>
          var map;
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 8
            });
          }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
      </body>
    </html>

1 个答案:

答案 0 :(得分:1)

gestureHandling: 'greedy'添加到地图变量中。所以它看起来像这样:

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