如何将地图平移操作从左键拖拽改为滚轮点击拖拽？

完全可以实现，核心思路是禁用默认的左键拖拽平移功能，然后绑定鼠标中键（滚轮键）的按下、移动、松开事件，通过计算鼠标偏移量来触发地图平移。以下是主流地图库的具体实现方式：

Leaflet 实现示例 #

• 先禁用默认左键拖拽：

  map.dragging.disable();
  

• 绑定中键事件实现自定义平移：

  let isMiddleButtonDown = false;
  let startCoords = {};
  
  // 监听中键按下
  map.on('mousedown', (e) => {
    if (e.originalEvent.button === 1) { // 1 对应鼠标中键
      isMiddleButtonDown = true;
      startCoords = { x: e.originalEvent.clientX, y: e.originalEvent.clientY };
    }
  });
  
  // 监听鼠标移动，计算偏移并平移地图
  map.on('mousemove', (e) => {
    if (isMiddleButtonDown) {
      const dx = e.originalEvent.clientX - startCoords.x;
      const dy = e.originalEvent.clientY - startCoords.y;
      // 根据偏移量计算新的地图中心
      const newCenter = map.containerPointToLatLng([
        map.getSize().x / 2 - dx,
        map.getSize().y / 2 - dy
      ]);
      map.setView(newCenter);
      // 更新起始坐标，保持平滑拖拽
      startCoords = { x: e.originalEvent.clientX, y: e.originalEvent.clientY };
    }
  });
  
  // 监听鼠标松开或离开，结束拖拽状态
  map.on('mouseup mouseleave', () => {
    isMiddleButtonDown = false;
  });
  

Google Maps JavaScript API 实现示例 #

• 先禁用默认拖拽：

  map.setOptions({ draggable: false });
  

• 绑定中键事件实现平移：

  let isMiddleDragging = false;
  let startLatLng;
  let startPixel;
  
  // 监听中键按下
  google.maps.event.addListener(map, 'mousedown', (e) => {
    if (e.button === 1) {
      isMiddleDragging = true;
      startLatLng = e.latLng;
      startPixel = map.getProjection().fromLatLngToPoint(startLatLng);
    }
  });
  
  // 监听鼠标移动，计算偏移并更新地图中心
  google.maps.event.addListener(map, 'mousemove', (e) => {
    if (isMiddleDragging) {
      const currentPixel = map.getProjection().fromLatLngToPoint(e.latLng);
      const dx = currentPixel.x - startPixel.x;
      const dy = currentPixel.y - startPixel.y;
      const newCenterPixel = new google.maps.Point(startPixel.x - dx, startPixel.y - dy);
      const newCenter = map.getProjection().fromPointToLatLng(newCenterPixel);
      map.setCenter(newCenter);
    }
  });
  
  // 结束拖拽状态
  google.maps.event.addListener(map, 'mouseup', () => {
    isMiddleDragging = false;
  });
  

其他地图库通用逻辑 #

如果使用高德、百度等国内地图库，实现逻辑基本一致：

1. 关闭默认的左键拖拽平移配置；
2. 监听鼠标中键的按下、移动、松开事件；
3. 在移动事件中计算鼠标的像素偏移，将偏移量转换为地图坐标的偏移，最终更新地图中心完成平移。

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