更新：

Question

首先，我是一名业余爱好者，并且尝试在移动设备上查看时使用jquery和google's 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);
}

该地图不会在移动设备上调整大小...但是我知道这是可能的，因为我能够使用路线图来使它正常工作，但我不希望该地图类型使用。真正感谢您的帮助...我想我很亲密，只是不够亲密！

更新：

我尝试调试它，但是如果使用chrome则很难理解输出。取而代之的是，我用Google搜索技术来检测移动屏幕。最后，我将上面的最后六行更改为：

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

然后将其添加到CSS：

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

我确定这将使“真正的”开发人员在夜间失去睡眠，但它可以在我的手机（S9）上正常工作。

在移动设备上查看时尝试使用Google Map API重置缩放

更新：

0 个答案: