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

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

1 个答案: