Javascript 是否可以通过拖动更改背景位置？

我有一个html地图，它使用世界地图图像作为背景

我可以制作一个js函数来改变div的背景位置，但我喜欢在用户点击地图然后像谷歌地图一样拖动时改变背景位置

我这里有一个示例页面：它使用

---

如果有任何建议或提示，我将不胜感激。

一个简单的方法就是使用jQuery UI

HTML

JavaScript

放置标记

可以在地图上放置一个标记或任何东西。这很简单，坐标是基于画布中的像素。对于测试用例中的标记，从画布的左侧和顶部开始为150px

// Create simple dot marker
$("<div></div>")
    .addClass("map-marker")
    .appendTo(canvas)
    .offset(function(){
        return { left: 150, top: 150 };
    })
    // Append a label
    .append("<span><- Dot</span>");

现在来看看更高级的东西，即臭名昭著的谷歌地图pin

// Create draggable Google Maps pin marker
var pin =
$("<div></div>")
    .addClass("google-pin")
    .appendTo(canvas)
    .offset(function(){
        return { left: 50, top: 50 };
    })
    // Bind mouseup/down for visual confirmation of grab
    .bind({
        mousedown: function(){
            var os = pin.offset();
            pin.offset(function(){
                return { top: os.top-3 };
            });
        },
        mouseup: function(){
            var os = pin.offset();
            pin.offset(function(){
                return { top: os.top+3 };
            });
        }
    })
    // Make it draggable
    .draggable({
        start: function(e,ui){
            ui.helper.offset(function(){
                return { top: ui.offset.top-2 };
            });
        },
        container: canvas
    });

---

看

我现在就给你写点东西…@Oscar Godson/！！谢谢@马库斯·埃克沃尔//谢谢你的剧本。它工作得很好，但我需要使用背景图像，而不是实际的img元素。@Marcus Ekwall//它工作得很好。我真的很感激。但是..我们已经建立了一个完全工作的地图，它使用背景位置。有没有办法用jquery改变背景位置？@Moon，当然有。但draggable不适用于背景位置。无论如何，我为你添加了一个遏制：@Marcus Ekwall//谢谢你更新的脚本。我会继续寻找，如果我找不到解决方案，我会尝试调整你的解决方案。谢谢@月球，使用绝对位置比使用背景位置更好。有了完全工作的地图，你到底是什么意思？谷歌地图已经非常棒，而且非常可定制，因此没有理由重新发明轮子：

// Create simple dot marker
$("<div></div>")
    .addClass("map-marker")
    .appendTo(canvas)
    .offset(function(){
        return { left: 150, top: 150 };
    })
    // Append a label
    .append("<span><- Dot</span>");

// Create draggable Google Maps pin marker
var pin =
$("<div></div>")
    .addClass("google-pin")
    .appendTo(canvas)
    .offset(function(){
        return { left: 50, top: 50 };
    })
    // Bind mouseup/down for visual confirmation of grab
    .bind({
        mousedown: function(){
            var os = pin.offset();
            pin.offset(function(){
                return { top: os.top-3 };
            });
        },
        mouseup: function(){
            var os = pin.offset();
            pin.offset(function(){
                return { top: os.top+3 };
            });
        }
    })
    // Make it draggable
    .draggable({
        start: function(e,ui){
            ui.helper.offset(function(){
                return { top: ui.offset.top-2 };
            });
        },
        container: canvas
    });