Làm cách nào để kích hoạt sự kiện thu nhỏ trong trình duyệt thay đổi kích thước?

Question

Tôi đang sử dụng leafletjs cho ứng dụng thử nghiệm của mình. Tôi cần kích hoạt sự kiện thu phóng khi trình duyệt được thay đổi kích thước.

Đây là mã thay đổi kích thước trình duyệt của tôi:

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

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

Mã này nếu để hiển thị bản đồ:

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

Những gì tôi đã làm là tạo một biến toàn cầu gọi mapOptions. Đầu tiên bản đồ được khởi tạo với mapOptions.zoom = 7 và khi trình duyệt được thay đổi kích thước, thì tôi đã thay đổi giá trị của mapOptions.zoom thành 6. Giá trị đã thay đổi nhưng không có hiệu ứng trong thu phóng bản đồ.

Answer 1

Nếu bạn muốn thay đổi mức thu phóng của bản đồ, hãy thử setZoom() chức năng thay vì mapOptions.zoom khi bạn muốn thay đổi mức thu phóng của bản đồ. Vì vậy, trong trường hợp của bạn, hãy sử dụng số điện thoại

map.setZoom(6); 

Hy vọng nó sẽ hoạt động.