Question

如果屏幕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或其他内容。

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方法。

Answer 2

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

作为一种选择，您可以使用静态Google地图，网页宽度小于340像素，如果用户需要完整的地图互动或控件，则可以直接链接到Google地图：https://developers.google.com/maps/documentation/static-maps/

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

2 个答案: