传单创建不同的缩放级别为不同的屏幕尺寸使用JavaScript

Leaflet creating different zoom levels for different screen sizes using JavaScript

本文关键字：屏幕 JavaScript 缩放 单创建 创建      更新时间：2023-09-26

我是新的传单-虽然开始与一个免费的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了，对它的理解已经足够危险了。:)我的组织正在检查传单，以生产一个更大的项目，这对我们来说是一个重要的问题。因此，尽管我使用的是MapBox的例子，我们还是直接移动到传单。

你可以像这样用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);
    }
});

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

相关文章：