Блог

У меня есть скрипт для карт Google, который 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>
  

Вы работаете с фиксированным центром (51.523612, -0.125816) , иd фиксированный масштаб (17)

таким образом, ваша карта всегда будет отображаться так, как если бы вы указали ее

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

На моем экране (1920×1080) с открытой консолью это будет примерно означать, что границы карты определяются

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