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

Hide Google Maps controls on small screens (mobiles, etc...)

本文关键字：隐藏 谷歌地图 控件 屏幕 手机      更新时间：2023-09-26

如果屏幕小于一定的像素量，如何隐藏Map Type选项（Map，Satellite…）？这就是我的谷歌地图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，如果屏幕较小，它应该被隐藏。

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

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

这里的主要问题是采用正确的方式获取浏览器宽度。我会考虑使用$(window).width()jQuery方法

编辑：我不建议再为此目的使用jQuery了
查看此答案以获取浏览器宽度。

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

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

相关文章：