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

Answer 2

您可以使用整数值（即20）设置未记录的controlSize地图选项属性，以设置地图控件的大小。

请查看@Dutchmanjonny的最新帖子：Huge Google Maps Controls (Possible Bug?)

google maps API v3 zoomControlOptions LARGE在移动设备上不显示滑块

2 个答案: