javascript - 在谷歌地图上更改手机的缩放比例

Question

我有一个谷歌地图脚本，它为桌面浏览器设置了一定距离的zoom。我想知道在移动设备上查看时是否有不同的缩放比例。

我认为可以使用 if 语句来完成，但我不确定如何将它集成到脚本中。我对 jquery 不是很满意，如果有任何帮助，我将不胜感激。

脚本是:

  <script>
        window.onload = function () {

            var latlng = new google.maps.LatLng(51.523612, -0.125816);

            var styles = [{
                "stylers": [{
                    "saturation": -100
                }, {
                    "hue": "#ff0000"
                }, {
                    "gamma": 0.92
                }]
            }, {
                "featureType": "poi",
                "stylers": [{
                    "visibility": "off"
                }]
            }, {
                "elementType": "geometry.fill",
                "stylers": [{
                    "gamma": 0.85
                }]
            }, {}]

            var myOptions = {
                zoom: 17,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                scrollwheel: false,
                draggable: false,
                styles: styles

            };

            map = new google.maps.Map(document.getElementById('map'), myOptions);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,

            });
            marker.setMap(map);
        }
    </script>

Answer 1

您正在使用固定中心 (51.523612, -0.125816) 和固定缩放 (17)

因此您的 map 将始终如您所愿地显示

map.setCenter(new google.maps.LatLng(51.523612, -0.125816));
map.setZoom(17);

在控制台打开的我的屏幕 (1920x1080) 中，这大致意味着 map 边界由

SW:(51.522, -0.136)
NE:(51.526, -0.12)

因此，如果我不设置中心和缩放，而是告诉我的 map 适应这些边界，我可以获得相同的视口(viewport)。

map.fitBounds(new google.maps.LatLngBounds(new google.maps.LatLng(51.522, -0.136), new google.maps.LatLng(51.526, -0.12))) 

这将根据您的屏幕尺寸自动计算应该应用的缩放比例。当然，缩放以不连续的步骤变化，因此结果可能与您需要显示的不完全一致。

在您的情况下，这意味着将您的 map 声明为

var myOptions = {
    bounds: new google.maps.LatLngBounds(new google.maps.LatLng(51.522, -0.136), new google.maps.LatLng(51.526, -0.12)),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    scrollwheel: false,
    draggable: false,
    styles: styles
};

map = new google.maps.Map(document.getElementById('map'), myOptions);