代码之家  ›  专栏  ›  技术社区  ›  MK-DK

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

  •  -1
  • MK-DK  · 技术社区  · 7 年前

    是否只能在手机上更改缩放?

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

    <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>
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   lukbrt    7 年前

    您可以通过(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/ 图书馆。