Попытка сброса масштаба с API Google Map при просмотре на мобильном устройстве - PullRequest
Новая
       20

Попытка сброса масштаба с API Google Map при просмотре на мобильном устройстве

0 голосов
/ 13 июня 2019

Во-первых, я хобби и пытаюсь сбросить уровень масштабирования карты Google с помощью jquery и API Google при просмотре на мобильном устройстве. Я не могу заставить это работать со следующим кодом. Последние 6 строк я нашел на этом сайте, но я не уверен в месте размещения. Я понял, что это в конце сценария. Я пробовал разные места размещения, но не смог. 

var locations = [
  ['Bowser, BC', 49.434, -124.683, 1],
  ['Calgary, AB', 51.103, -114.186, 2]

];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 6,
  disableDefaultUI: true,
  center: new google.maps.LatLng(50.686,-119.819),
  mapTypeId: google.maps.MapTypeId.ROADMAP
    });

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) { 
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

var screenWidth = window.screen.width * window.devicePixelRatio;
var screenHeight = window.screen.height * window.devicePixelRatio;
if (screenWidth < 600 && typeof map !== "undefined")
{
    map.setZoom(12);
}

Карта не изменяется на мобильном устройстве ... но я знаю, что это возможно, поскольку я смог заставить ее работать, используя карту маршрутов, но я не хочу этот тип карты. Действительно ценю любую помощь ... Я думаю, что я близко, но не достаточно близко!

Обновление:

Я попытался отладить это, но у меня возникают трудности с пониманием выводов, если таковые имеются, используя хром. Вместо этого я погуглил методы jquery для обнаружения мобильных экранов. Я закончил этим, изменил последние шесть строк выше: 

      var windowWidth=window.screen.width;
         if (windowWidth < 600 )
         {
             map.setZoom(4);
           }

Затем добавил это в CSS: 

    @media all and (min-width: 720px) {
          #map {width:auto;}
        }

Я уверен, что «истинные» разработчики будут спать по ночам, но это работает на моем мобильном телефоне (S9).

...