javascript - 在小屏幕(手机等)上隐藏谷歌地图控件

Question

如果屏幕小于一定数量的像素，如何隐藏 map 类型选项( map 、卫星...)？这就是我的 Google Maps API V3 代码的样子:

var mapOptions = {
          center: new google.maps.LatLng(initLat, initLong),
          zoom: level,
          scaleControl: true,
          mapTypeControl: true,
          mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
              position: google.maps.ControlPosition.RIGHT_TOP
          },
          zoomControl: true,
          zoomControlOptions: {
              position: google.maps.ControlPosition.LEFT_TOP
          },
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

如您所见，mapTypeControl 现在设置为 true，如果屏幕宽度小于 340px，我需要将其设置为 false； 。还有 mapTypeControlOptions 如果屏幕较小，应该隐藏它或其他东西。

Answer 1

您可以在创建您的 mapOptions 变量后检查浏览器宽度，如果它小于 340px，您可以像普通的 javascript 对象一样修改它。

var width = window.innerWidth;
if(width < 340){
    mapOptions.mapTypeControl = false;
    delete mapOptions.mapTypeControlOptions;
}

这里的主要问题是the right way to take the browser width . 我会考虑使用 $(window).width() jQuery 方法。

编辑:我不建议再为此目的使用 jQuery。
检查this answer获取浏览器宽度。