移动设备上的 Google 地图缩放级别

Question

我已经用 API 制作了一个谷歌地图。 地图正常工作，但我对移动设备上的缩放级别不满意。 我想缩小更多，但仅限于移动设备。

是否可以仅在移动设备上更改缩放比例？

HTML

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12">
    <div id="map"></div>
  </div>
</div>

CSS

#map {
  height: 400px;
  width: 100%;
  background-color: grey;
}

Javascript

<script>
  function initMap() {
    var center = {lat: 56.463415, lng: 9.495170};
    var locations = [

      ['Headline', 'Headline<br>Address<br><a href="#" target="_blank">Show direction</a>', 1.686340, 15.998270],

    ];

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: center
    });
    var infowindow = new google.maps.InfoWindow({});
    var marker, count;
    for (count = 0; count < locations.length; count++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[count][2], locations[count][3]),
        map: map,
        title: locations[count][0]
      });
      google.maps.event.addListener(marker, 'click', (function(marker, count) {
        return function() {
          infowindow.setContent(locations[count][1]);
          infowindow.open(map, marker);
        }
      })(marker, count));
    }
  }
  google.maps.event.addDomListener(window, 'load', initMap);
</script>

Answer 1

您可以通过 (window.screen.width * window.devicePixelRatio) 和类似的高度 (window.screen.height * window.devicePixelRatio) 获得显示宽度。

然后，您可以使用浏览器中的开发工具检查地图变得太小的最大分辨率。

最后更改该条件的缩放属性。 例如：

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

检测移动设备的其他方法是使用http://www.modernizr.com/库。