如何将jQuery Panzoom初始缩放设置为最大缩小值？

要把初始缩放值改成最大缩小值（也就是代码里的s_min，即允许的最小缩放比例），你只需要调整s_init的赋值逻辑，同时修正相关的缩放增量和最大值计算，避免出现缩放功能失效的情况。下面是具体的修改方案：

原代码问题分析 #

原代码里的s_init是基于s_min加上不同屏幕尺寸的偏移量得到的：

var s_init = $window.width() < 768 ? s_min + .14 : s_min + .1; 
var s_init = $body.hasClass('is-ipad') ? s_min + .3 : s_init; 

这就导致初始缩放值始终比最大缩小值要大，不符合你的需求。

修改后的完整代码 #

var init_map = function() { 
  var full = 3000; 
  var vmax = $map.innerWidth() > $map.innerHeight() ? $map.innerWidth() : $map.innerHeight(); 
  var s_min = (vmax / full) + .01; 
  // 直接将初始缩放值设为最大缩小值s_min
  var s_init = s_min; 
  var s_min = parseFloat(s_min.toFixed(2)); 
  var s_init = parseFloat(s_init.toFixed(2)); 
  // 重新计算缩放增量，这里设置为s_min的12.5%，你可以根据需求调整比例
  var s_inc = parseFloat((s_min * 0.125).toFixed(2)); 
  // 设置最大缩放值为s_min的1.5倍，同样可以按需调整
  var s_max = parseFloat((s_min * 1.5).toFixed(2)); 
  var y_offset = -72; 
  var x_offset = ((full / 2) - ($window.width() / 2)) / 1.08; 
  var s_trans = 'translate3d(-' + x_offset + 'px,' + y_offset + 'px,0) scale(' + s_init + ')'; 
  var options = { 
    startTransform: s_trans, 
    minScale: s_min, 
    maxScale: s_max, 
    increment: s_inc, 
    exponential: false, 
    duration: 350, 
    easing: 'ease', 
    cursor: 'drag', 
    contain: 'automatic', 
  }; 
  $map_canvas.panzoom(options);
}

关键改动说明 #

• 修改初始缩放值：把原来根据屏幕尺寸给s_init加偏移的逻辑删掉，直接赋值为s_min，这样地图加载时就会以最大缩小的状态显示。
• 重新计算缩放增量和最大值：原代码的s_inc是基于s_init - s_min计算的，当s_init等于s_min时这个值会变成0，导致无法放大地图。这里我们改成基于s_min的比例来计算增量和最大值，你可以根据实际需求调整0.125（每次缩放增量）和1.5（最大缩放倍数）这两个数值。
• 保留其他参数：平移偏移、动画时长、光标样式等参数保持不变，确保地图的其他交互功能正常运行。

内容的提问来源于stack exchange，提问作者Adam