谷歌地圖API v3 zoomControlOptions LARGE在移動設備上不顯示滑塊

Question

我正在爲移動設備設置地圖並希望使用縮放滑塊。

g.map = new google.maps.Map(
     document.getElementById("mapcanvas"), 
     { 
      disableDoubleClickZoom : false, 
      disableDefaultUI  : true, 
      scaleControl   : true, 
      panControl    : false, 
      navigationControl  : true, 
      mapTypeControl   : false, 
      zoomControlOptions  : { 
       position : google.maps.ControlPosition.RIGHT_BOTTOM, 
       style  : google.maps.ZoomControlStyle.LARGE 
      }, 
      mapTypeControlOptions: { 
       mapTypeIds   : [ 
              google.maps.MapTypeId.ROADMAP, 
              google.maps.MapTypeId.HYBRID 
             ], 
       style    : google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
      }, 
      zoom     : 16, 
      center     : new google.maps.LatLng('37.8477', '-122.2627'), 
      mapTypeId    : google.maps.MapTypeId.ROADMAP 
     } 

當我看這個桌面上的控制滑塊，但在移動設備上，它仍顯示小+和 - 按鈕和滑動條沒有。

這是一個錯誤？我如何強制滑塊進行縮放？

Answer 1

不，這不是一個錯誤。縮放工具的默認行爲是在大屏幕設備上顯示較大的圖像，而在手機等較小的屏幕上顯示較小的（僅限於+ - ）。

如果您想隨時使用滑塊查看較大的縮放工具，則需要在mapOptions中設置google.maps.ZoomControlStyle.LARGE。例如：

var mapOptions = { 
    zoom: 4, 
    center: new google.maps.LatLng(-33, 151), 
    zoomControl: true, 
    zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.LARGE 
    } 
} 

這裏是我的源： https://developers.google.com/maps/documentation/javascript/controls#DefaultUI