传单响应式设计 - 使用JavaScript为不同的屏幕尺寸创建不同的缩放级别

Question

我是Leaflet的新手 - 虽然从一个免费的MapBox地图开始.我创建了一个带有媒体查询的网站.

我使用以下代码将MapBox映射添加到我的索引文件中:

<section id="map_section">
     <div id='map'></div>
     <script>

       var map = L.mapbox.map('map', 'pandora.hn8og4ae', {
           scrollWheelZoom: false,
           minZoom: 5,
           maxZoom: 18
       }).setView([45, -67.874], 8);

     </script>
 </section>

在较小的屏幕尺寸(移动设备)上,我希望地图以不同的缩放级别启动,因为我没有足够的屏幕尺寸来同时显示所有标记.你会怎么用css做这个？MapBox上一位乐于助人的人建议如下:

您需要以编程方式在JavaScript中监听窗口大小调整事件并在用户的屏幕达到特定大小时设置map.setZoom(NUMBER).

有人会介意告诉我如何做到这一点？

我已经迈出了迈向JavaScript的步骤并且了解到足够危险.:)我的组织正在检查Leaflet以生成更大的项目,这对我们来说是一个基本问题.所以即使我使用MapBox示例,我们也直接转向Leaflet.

Answer 1

你可以用这样的javascript监听屏幕调整大小事件

// listen for screen resize events
window.addEventListener('resize', function(event){
    // get the width of the screen after the resize event
    var width = document.documentElement.clientWidth;
    // tablets are between 768 and 922 pixels wide
    // phones are less than 768 pixels wide
    if (width < 768) {
        // set the zoom level to 10
        map.setZoom(10);
    }  else {
        // set the zoom level to 8
        map.setZoom(8);
    }
});

或者,您可能只想在创建地图时获得屏幕宽度,而不是监听屏幕调整大小......