Javascript 将图像移动到预定义的x、y位置

我正在为用户构建一个自定义位置选择器，它本质上是一个地图（图像）和一个

文本输入

，用户在其中输入他的国家。自定义地图约为1500x1000px。最终目标是缓慢地自动滚动地图到所选国家的某个预定义的

x，y

。比如说，当用户从下拉列表中选择德国时，如何定义德国位于700x800，并将地图图像围绕该点居中

---

这是我的，其中包括可移动地图（我没有在这里添加任何代码，因为它很长，请原谅，并使用小提琴浏览代码）

为此使用位置对象。比方说

var germany = new Position(-700,-800);

您可以使用代码的其余部分设置位置：

germany.Apply(document.getElementById('draggableElement'));

虽然我猜它会设置左上角的位置，而不是中心，所以你需要记住这一点

编辑：将数字更改为负数，因为这实际上会将图片向上和向左移动，我认为这是您想要的行为

出于演示目的，我在您的应用程序中添加了一个按钮。虽然这绝对不是德国；）

编辑2： 要使用jQuery的animate设置位置更改的动画，只需使用以下语法：

$('#draggableElement').animate({
    left: germany.X,
    top: germany.Y
});

---

另请参见更新的。

这将取决于地图投影类型。例如，如果是墨卡托。看一看，您可以通过将屏幕宽度的一半添加到

x

和屏幕高度的一半添加到

y

来解决这个问题。这就是您的居中方式。尽管在这种情况下，它将是图片尺寸的一半，而不是屏幕尺寸的一半。无论如何，我们可以使用jQuery

Animate

？