如何复现Google Maps和Leaflet.js的捏合缩放交互（触控板/移动端）

核心逻辑是拦截目标区域内的捏合操作，阻止默认页面缩放行为，将捏合的距离变化转换为标准滚轮事件触发，可直接复用现有滚轮缩放逻辑，不影响页面其他区域的默认缩放能力。

实现步骤 #

• 监听目标区域的触控事件，识别双指捏合操作
• 计算双指距离变化得到缩放系数，拦截默认的页面缩放行为
• 将缩放系数转换为滚轮事件参数，主动在目标区域触发标准滚轮事件
• 额外兼容桌面端触控板的捏合操作识别

完整代码示例 #

// 替换为你的目标区域DOM节点
const targetArea = document.querySelector('.map-area')

// 存储捏合操作的初始状态
let initialPinchDistance = null
let lastScale = 1

// 计算两个触控点的像素距离
function getTouchDistance(touch1, touch2) {
  const dx = touch2.clientX - touch1.clientX
  const dy = touch2.clientY - touch1.clientY
  return Math.sqrt(dx * dx + dy * dy)
}

// 监听触控开始，记录初始捏合距离
targetArea.addEventListener('touchstart', (e) => {
  if (e.touches.length === 2) {
    initialPinchDistance = getTouchDistance(e.touches[0], e.touches[1])
    lastScale = 1
  }
}, { passive: false })

// 监听触控移动，拦截捏合操作并转换为滚轮事件
targetArea.addEventListener('touchmove', (e) => {
  if (e.touches.length === 2 && initialPinchDistance) {
    // 阻止默认的页面全局缩放
    e.preventDefault()
    const currentDistance = getTouchDistance(e.touches[0], e.touches[1])
    const currentScale = currentDistance / initialPinchDistance
    // 转换为滚轮delta值，系数可根据交互手感调整
    const deltaY = (lastScale - currentScale) * 120
    
    // 触发标准滚轮事件，复用现有滚轮缩放逻辑
    targetArea.dispatchEvent(new WheelEvent('wheel', {
      deltaY: deltaY,
      bubbles: true,
      cancelable: true
    }))
    
    lastScale = currentScale
  }
}, { passive: false })

// 触控结束重置状态
targetArea.addEventListener('touchend', (e) => {
  if (e.touches.length < 2) {
    initialPinchDistance = null
  }
})

// 兼容桌面端触控板捏合操作
targetArea.addEventListener('wheel', (e) => {
  // 触控板捏合触发的wheel事件自带ctrlKey=true标识
  if (e.ctrlKey) {
    e.preventDefault()
    // 直接使用e.deltaY走原有滚轮缩放逻辑即可
  }
}, { passive: false })

注意事项 #

• 所有监听事件必须设置passive: false，否则移动端浏览器会默认禁止preventDefault生效，无法拦截默认缩放
• 不要在全局视口meta标签设置user-scalable=no，避免影响页面其他区域的默认缩放能力
• 缩放转换系数可根据实际交互需求调整，不需要和示例完全一致

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