在小屏幕上隐藏Google地图控件（手机等） [英] Hide Google Maps controls on small screens (mobiles, etc...)

问题描述

如果屏幕si小于一定数量的像素，如何隐藏地图类型选项（地图，卫星...）？这就是我的Google Maps API V3代码的样子：

How to hide Map Type option (Map, Satellite...) if the screen si smaller than certain amount of pixels? This is how my Google Maps API V3 code looks like:

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 ，并且我需要将它设置为false if屏幕宽度小于可以说 340px; 。还有 mapTypeControlOptions 如果屏幕较小，它应该被隐藏或者是某些东西。

As you can see mapTypeControl is set to true now, and I need it to be set to false if screen width is smaller than lets say 340px;. Also there is mapTypeControlOptions which should be hidden or something if the screen is smaller.

推荐答案

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

You could check the browser width just after create your mapOptions variable, and if it's smaller than 340px, you can modify it like a regular javascript object.

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

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

The main problem here is the right way to take the browser width. I would consider using $(window).width() jQuery method.

这篇关于在小屏幕上隐藏Google地图控件（手机等）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！