Google地圖在小屏幕上隱藏控件

我想隱藏小屏幕上的Google地圖控件。默認情況下，Google地圖會隱藏它們，寬度爲320px，但我需要它們隱藏在更大的寬度上，大約400px。 Here is one working example，但我使用不同的代碼，所以它不工作，我只是得到語法錯誤。這裏是我的代碼：Google地圖在小屏幕上隱藏控件

var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: { 
     lat: 52.00, 
     lng: 10.00 
    }, 
    zoom: 4, 
     zoomControlOptions: { 
       position: google.maps.ControlPosition.LEFT_TOP 
      }, 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
       position: google.maps.ControlPosition.TOP_RIGHT 
      } 
    });

這是代碼捕獲寬度和禁用的控制，並與大多數谷歌地圖代碼的工作，但不是我的......

$(window).width()  
var width = window.innerWidth; 
if(width < 400){ 
      mapOptions.mapTypeControl = false; 
      mapTypeControl: false 
      disableDefaultUI: true 
      delete mapOptions.mapTypeControlOptions; 
     }

請告訴我如何結合這兩個代碼，讓他們工作，我試着自己做一些事情，但我只是得到語法錯誤。

來源

2016-09-22 Dreadlord

使用CSS mediaqueries？ – Roberrrt

是的，你是對的，最簡單的解決方案。我挖了下來，發現這個類gm-style-mtc，只是把display：none與媒體查詢結合起來。 Thx的建議，請寫一個答案，所以我可以選擇它作爲最好的。 – Dreadlord

簡單地與媒體查詢隱藏它，當屏幕變得太小）。

@media screen and (max-width: 400px) { 
    .gm-style-mtc { 
     display:none; 
    } 

}

來源

2016-09-22 12:48:26 Roberrrt

您可以使用JavaScript window.matchMedia()方法，以配合您的媒體查詢：

if(window.matchMedia("(your-media-query)").matches){ mapOptions.mapTypeControl = false disableDefaultUI: true delete mapOptions.mapTypeControlOptions; }

更多的相關信息在這裏：https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

來源

2016-09-22 11:58:50

Google地圖在小屏幕上隱藏控件

回答

相關問題