在小屏幕（手机等）上隐藏 Google 地图控件答案

【问题标题】：Hide Google Maps controls on small screens (mobiles, etc...)在小屏幕（手机等）上隐藏 Google 地图控件
【发布时间】：2016-03-10 09:07:52
【问题描述】：

如果屏幕 si 小于一定数量的像素，如何隐藏地图类型选项（地图、卫星...）？这就是我的 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，如果屏幕较小，应该隐藏或其他东西。

【问题讨论】：

标签： javascript java google-maps google-maps-api-3

【解决方案1】：

您可以在创建 mapOptions 变量后检查浏览器宽度，如果它小于 340 像素，您可以像普通的 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 以获取浏览器宽度。

【讨论】：

我有同样的问题，只是代码不同，所以你的答案只需要修改一下。请在这里查看我的问题：stackoverflow.com/questions/39638274/…

【解决方案2】：

在 Google Maps Javascript API 中，如果地图小于 200x200 像素，所有控件默认设置为消失。可以通过将控件显式设置为可见来修改此行为 - 但是目前似乎无法修改隐藏控件的默认大小。 https://developers.google.com/maps/documentation/javascript/controls

作为一种选择，如果用户需要完整的地图交互或控制，您可以使用屏幕宽度小于 340 像素的静态 Google 地图，它只是链接到 Google 地图：https://developers.google.com/maps/documentation/static-maps/

【讨论】：