在小屏幕（手機等）上隱藏 Google 地圖控件

Question

如果屏幕小於一定數量的像素，如何隱藏地圖類型選項（地圖、衛星...）？ 這是我的 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 340px; . 如果屏幕較小，還有應該隱藏的mapTypeControlOptions或其他東西。

Answer 1

您可以在創建mapOptions變量后立即檢查瀏覽器寬度，如果它小於 340px，您可以像常規 javascript 對象一樣修改它。

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

這里的主要問題是獲取瀏覽器寬度的正確方法。 我會考慮使用 $(window).width() jQuery 方法。

編輯：我不再推薦為此目的使用 jQuery。
查看此答案以獲取瀏覽器寬度。

Answer 2

在 Google Maps Javascript API 中，如果地圖小於 200x200px，所有控件默認設置為消失。 可以通過將控件顯式設置為可見來修改此行為 - 但是目前似乎無法修改隱藏控件的默認大小。 https://developers.google.com/maps/documentation/javascript/controls

作為一種選擇，您可以使用屏幕寬度小於 340 像素的靜態 Google 地圖，如果用戶需要完整的地圖交互或控件，則只需鏈接到 Google 地圖： https : //developers.google.com/maps/documentation/static-maps /