AmCharts Maps（amMaps）触屏设备缩放跳转bug技术咨询

阿华AIGC实验室

2026-5-19

AmCharts amMaps Worldlow 触屏缩放跳转Bug修复方案

我之前也碰到过这个触屏交互的坑，这其实是AmCharts默认触摸事件处理的一个小缺陷——当双指缩放中途变成单指时，地图没法正确识别状态切换，误把残留的单指操作当成了平移或缩放触发，直接导致区域跳转。

问题复现步骤

用触屏设备打开搭载Worldlow地图的页面
双指触屏进行缩放操作，保持两根手指在屏幕上
抬起其中一根手指，仅留另一根手指在屏幕上，此时地图缩放区域会出现异常跳转

原因分析

AmCharts的默认触摸监听在处理触摸点数量变化时，没有及时重置缩放/平移的状态标记。当双指操作突然变为单指时，之前的缩放计算上下文没被清除，导致单指移动被错误代入缩放逻辑，引发了区域偏移。

修复方案

我们可以通过自定义触摸事件监听，手动追踪触摸点数量，在状态切换时临时调整地图的交互权限，避免误触发：

// 初始化你的Worldlow地图实例
const map = am4core.create("chartdiv", am4maps.MapChart);
// 这里添加你的地图配置（如地图数据源、投影方式等）...

// 追踪当前屏幕上的触摸点数量
let activeTouches = 0;

// 监听触摸开始事件
map.svgContainer.htmlElement.addEventListener('touchstart', (event) => {
  activeTouches = event.touches.length;
});

// 监听触摸结束事件
map.svgContainer.htmlElement.addEventListener('touchend', (event) => {
  activeTouches = event.touches.length;
  
  // 当触摸点从2变为1时，临时禁用单指交互
  if (activeTouches === 1) {
    map.draggable = false;
    map.zoomable = false;
    
    // 短暂延迟后恢复正常交互，不影响后续操作
    setTimeout(() => {
      map.draggable = true;
      map.zoomable = true;
    }, 150);
  }
});

// 监听触摸移动事件，实时更新触摸点数量
map.svgContainer.htmlElement.addEventListener('touchmove', (event) => {
  activeTouches = event.touches.length;
  
  // 如果触摸点回到2，立即恢复双指缩放权限
  if (activeTouches === 2) {
    map.draggable = true;
    map.zoomable = true;
  }
});