2017-11-28 9 views
0

以下はGoogleマップの表示に使用するコードです。 このケースでは1095pxのサイズでウィンドウをサイズ変更すると問題が発生します。 この場合、Ctrlキーを押した場合にのみ、マウスホイールによるズームが可能です。 html min-with:1150pxを維持し、ctrlを要求するこの機能を無効にする方法はありますか?Googleマップ - マウススクロールで地図をズームCtrlキーを押してください

オプションgestureHandling:「greedy」はよく知られていますが、可能であればこの方法で解決したいと考えています。 ありがとう!

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

マップ変数にgestureHandling: 'greedy'を追加します。したがって、次のようになります。

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