Question

我想在小屏幕上隐藏Google地图控件。默认情况下，谷歌地图以320px的宽度隐藏它们，但我需要它们隐藏在更大的宽度上，大约400px。 Here is one working example，但我使用的是不同的代码，因此无效，我只是语法错误。这是我的代码：

var map = new google.maps.Map(document.getElementById('map-canvas'), {
     center: {
       lat: 52.00,
       lng: 10.00
     },
     zoom: 4,
      zoomControlOptions: {
              position: google.maps.ControlPosition.LEFT_TOP
          },
        mapTypeControl: true,
        mapTypeControlOptions: {
              position: google.maps.ControlPosition.TOP_RIGHT
          }
   });

这是捕获宽度和禁用控件的代码，它适用于大多数Google地图代码，但不适用于我的...

$(window).width()       
var width = window.innerWidth;
 if(width < 400){
            mapOptions.mapTypeControl = false;
            mapTypeControl: false
            disableDefaultUI: true
            delete mapOptions.mapTypeControlOptions;
        }

请告诉我如何将这两个代码组合起来以便它们起作用，我尝试自己做一些事情，但我只是得到语法错误。

Answer 1

当屏幕太小时，只需用媒体查询隐藏它;）。

@media screen and (max-width: 400px) {
    .gm-style-mtc {
        display:none;
    }   

}

Answer 2

您可以使用Javascript window.matchMedia()方法来匹配媒体查询：

if(window.matchMedia("(your-media-query)").matches){ mapOptions.mapTypeControl = false disableDefaultUI: true delete mapOptions.mapTypeControlOptions; }

此处有更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Google地图会在小屏幕上隐藏控件

2 个答案: