Question

我使用API制作了Google地图。地图可以正常工作，但是我对移动设备上的缩放级别不满意。我想放大更多，但仅限移动设备。

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

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）。

那么您可以例如使用浏览器中的开发工具检查地图变得过小的最大分辨率。

最后，更改该条件的zoom属性。例如：

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/库。

移动设备上的Google Maps缩放级别

1 个答案: