如何在画布上滚动谷歌地图样式？

Question

我正在尝试制作自己的小地图，到目前为止我在画布上有一些工作，唯一的问题是当我拖动地图时，它仅限于鼠标在画布上移动的距离，我需要能够点击并拖动，并让X，Y继续从鼠标当前所在的位置开始，它正在设置X，Y只是鼠标移动，希望我自己清楚，这是一个小提琴，看看我的意思：< / p>

http://jsfiddle.net/h7rYt/

我在拖动时处理图像移动的代码：

can.onmousemove = function(e) { 
    if (map.moving) {
        console.log(e.pageX + ' ' + e.pageY);
        map.posX = e.pageX;
        map.posY = e.pageY;
    }
}

can.onmousedown = function() {
    map.moving = true;
}

document.onmouseup = function(e) {
    map.moving = false;
}

Answer 1

您需要存储最近的鼠标位置，并且每次都应用差异。见http://jsfiddle.net/SMQZk/

can.onmousemove = function(e) { 
    if (map.moving) {
        console.log(e.pageX + ' ' + e.pageY);
        map.posX += e.pageX - map.lastX;
        map.posY += e.pageY - map.lastY;
        map.lastX = e.pageX;
        map.lastY = e.pageY;
    }
}

can.onmousedown = function(e) {
    map.lastX = e.pageX;
    map.lastY = e.pageY;
    map.moving = true;
}