如何在JavaScript中实现地图？

Question

我想知道，最简单的方法是什么：

{x: 0, y: 0, image: 'map_00_00.png',
x: 50, y: 0, image: 'map_01_00.png',
x: 50, y: 50, image: 'map_01_01.png'}

像谷歌地图一样。我想继续使用jQuery。你会使用一些插件进行拖动吗？或者只是参加一些简单的活动？

我认为最简单的方法是一次加载所有图像，使用CSS定位它们，然后添加一些拖动以显示视口的隐藏部分。

我仍然对其他人的想法非常好奇。

Answer 1

查看OpenLayers项目。它是一个开源地图界面实现（很像谷歌地图）。你可以从那里得到一些想法。

Answer 2

所以今天早上我被黑了，这很简单。

1. 一个div位于[0,0]，宽度和高度均为100％。
2. 里面是另一个div，它是绝对定位的，最初位于[0,0]但是这个会随着我们的拖动而移动。此外，一切都在这一个。
3. 你不能使用jQuery的Draggable实现。问题是，你不想拖动div 2本身，因为你会把它拖走:-)

所以我实现了自己的drag-n-drop，它接收顶部div上的事件并移动底层div。查看source code！

Answer 3

最简单的方法可能是通过Google Maps API向Google地图添加custom map type。看看可能适合您的ImageMapType。