在谷歌地图上更改移动缩放

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.setCenter(new google.maps.LatLng(51.523612, -0.125816));
map.setZoom(17);

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

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

因此，如果我不是设置中心和缩放，而是告诉我的地图适合这些边界，我可以实现相同的视口。

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

这将根据您的屏幕尺寸自动计算它应该应用的缩放比例。当然，缩放会以离散的步骤变化，因此结果可能并不完全是您需要显示的。

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

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);