如何使用Javascript和Processing实现谷歌地图样式的缩放效果

要实现谷歌地图同款缩放效果，核心是保证缩放前后鼠标位置对应的地图坐标完全重合，你之前的代码是近似计算偏移，加上int强制转整丢精度，才会出现越远离中心偏移越明显的问题。

修复步骤如下：

• 删除所有不必要的int强制转换，保留浮点精度，避免多次缩放后误差累积
• 统一缩放前后的坐标换算逻辑，先记录缩放前鼠标指向的地图原始坐标，缩放后再把这个坐标映射回新的画布位置，反推新的centerX/centerY
• 把边界校验逻辑从缩小分支移到缩放逻辑末尾，不管放大缩小都做边界校验，避免地图移出可视区域
• 修复原有代码里缩小分支imgW赋值结尾误写冒号、放大分支缺少边界校验的小问题

修正后的缩放函数代码 #

//Zoom function
function mouseWheel(event) {
  var e = event.deltaY;
  var oldZoomModifier = 1 + (zoomFactor * abs(scale));
  // 计算当前鼠标指向的地图原始坐标
  var mapPointX = (mouseX - centerX) * oldZoomModifier + imgOGW / 2;
  var mapPointY = (mouseY - centerY) * oldZoomModifier + imgOGH / 2;
  var scaleChanged = false;

  //Zoom in
  if (e < 0) {
    if (scale < maxScale) {
      scale++;
      scaleChanged = true;
    }
  }

  //Zoom out
  if (e > 0) {
    if (scale > minScale && !(windowWidth > 1840 && scale == -3)) {
      scale--;
      scaleChanged = true;
    }
  }

  if (scaleChanged) {
    var newZoomModifier = 1 + (zoomFactor * abs(scale));
    imgW = imgOGW / newZoomModifier;
    imgH = imgOGH / newZoomModifier;
    // 用之前记录的地图原始坐标反推新的中心坐标
    centerX = mouseX - (mapPointX - imgOGW / 2) / newZoomModifier;
    centerY = mouseY - (mapPointY - imgOGH / 2) / newZoomModifier;

    // 统一做边界校验
    if (centerX - imgW / 2 > 0) {
      centerX = imgW / 2;
    }
    if (centerX + imgW / 2 < width) {
      centerX = width - imgW / 2;
    }
    if (centerY - imgH / 2 > 0) {
      centerY = imgH / 2;
    }
    if (centerY + imgH / 2 < height) {
      centerY = height - imgH / 2;
    }
  }
}

修正后的渲染逻辑代码 #

原有代码中viewX、viewY和centerX、centerY变量重复，统一用center坐标做标记点可见性判断即可，避免变量不同步导致的标记点显示错误：

function draw() {
  var zoomModifier = (1 + (zoomFactor * abs(scale)));

  background(0);
  imageMode(CENTER);
  image(map, centerX, centerY, imgW, imgH);

  for (var m of markers) {
    if (m.x/zoomModifier > (centerX - width/2) && m.x/zoomModifier < (centerX + width/2) && m.y/zoomModifier > (centerY - height/2) && m.y/zoomModifier < (centerY + height/2)) {
      m.display();
    }
  }
}

修改完成后缩放时鼠标指向的位置会固定不动，和谷歌地图的缩放手感完全一致，远离中心的位置也不会出现偏移，缩放稳定性也会同步提升。

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