javascript - Google map 隐藏小屏幕上的控件

Question

我想在小屏幕上隐藏 Google map 控件。默认情况下，谷歌地图将它们隐藏在 320 像素宽度，但我需要它们隐藏在更大的宽度，大约 400 像素。 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 map 代码，但不适用于我的...

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

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

Answer 1

您可以使用 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