javascript - 如何在浏览器调整大小时触发缩小事件？

Question

我正在为我的测试应用程序使用 leafletjs。我需要在调整浏览器大小时触发缩小事件。

这是我的浏览器调整大小代码:

(function(){
    $(window).on("resize", resize); 
    function resize() {
        "use strict";

        if($(window).width() <= 765){
            mapOptions.zoom = 5;
            console.log(mapOptions.zoom);
        }
    }
})();

如果要显示 map ，此代码:

L.TopoJSON = L.GeoJSON.extend({
    addData: function(jsonData) {    
        if (jsonData.type === "Topology") {
            for (key in jsonData.objects) {
                geojson = topojson.feature(jsonData, jsonData.objects[key]);
                L.GeoJSON.prototype.addData.call(this, geojson);
            }
        } else {
            L.GeoJSON.prototype.addData.call(this, jsonData);
        }
    }  
});

var tiles = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
var latlng = new L.LatLng(28.40, 84.15);
mapOptions={
    dragging: false,
    zoomControl: true,
    scrollWheelZoom: false,
    doubleClickZoom: false,
    touchZoom: false,
    attributionControl: false,
    center: latlng,
    zoom: 7,
    layers: [tiles]
};
console.log(mapOptions.zoom + 'first');

map = L.map('map-nepal', mapOptions);
map.invalidateSize();

var topoLayer = new L.TopoJSON();
$.getJSON('js/map/districts.topo.json').done(addTopoData);

我所做的是创建一个名为 mapOptions 的全局变量。首先使用 mapOptions.zoom = 7 初始化 map ，当调整浏览器大小时，我将 mapOptions.zoom 的值更改为 6。该值已更改，但对 map 的缩放没有影响。

Answer 1

如果您想更改 map 的缩放级别，请尝试使用 setZoom() 函数代替 mapOptions.zoom 来更改 map 的缩放级别。所以，在你的情况下，使用这个

map.setZoom(6);

希望它能起作用。