Leaflet响应式设计 - 使用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。

- user3683414

---

如果您正在使用大量的标记，您应该考虑使用MarkerCluster https://github.com/Leaflet/Leaflet.markercluster。 - Marko Letic

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

相比于监听屏幕大小的变化，您可能只想在创建地图时获取屏幕宽度一次...

- sfletche