谷歌地图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