可拖动的内部框架类似于Google地图 [英] Draggable Inner Frame similar to google maps

问题描述

曾经玩过JavaScript游戏.尤其是RTS类型...问题如下.

Been playing with the thought of javascript game. Especially RTS types... the question is as followed.

如何创建类似于Google地图的可拖动内部框架?

How do i work on creating a draggable inner frame, similar to google maps?

这个想法是，有一个覆盖的UI，下面有一个更大的可拖动地图.类似于您通常的RTS游戏.但是，我一直在试图为这种接口解决一个简单的问题.是否有类似的现成API?还是我需要从头开始做??

The idea, is that there is an overlaying UI, and a much larger draggable map underneath. Sort of similar to your usual RTS games. However i been trying to figure a simple work around for such an interface. Is there a ready made API for something similar?, or would i need to do it from scratch?.

如果可能的话，它也可以在iPhone上运行= X

If possible, it should work on an iphone too =X

其他信息: 据我到目前为止所知，谷歌地图似乎使用放置在地图顶部的可拖动元素来检测拖动事件.但是我不明白的是，它仍然能够击中其下方的物体...

Additional info: From what i know so far, it seems like google maps uses a draggable element placed ontop of the map, detecting the drag events. What i dun understand however, is how, it is still able to hit objects beneath it...

推荐答案

我在一秒钟之内就把它放在一起了:

I just threw this together in a second:

http://jsfiddle.net/purmou/mrJtG/

它使用jQuery UI的(Draggable)函数.这是HTML和CSS:

It uses jQuery UI's (http://jqueryui.com/home) "Draggable" function. Here's the HTML and CSS:

#range {
    width:400px;
    height:400px;
    overflow:hidden;
    border:1px solid black;
}

<div id="range">
    <img src="http://img1.loadtr.com/k-483417-Map_of_the_World.gif" id="map" />
</div>

这是jQuery:

jQuery(document).ready(function() {
    jQuery("#map").draggable(); 
});

在此处中查看可拖动页面，以进行进一步的探索.

Take a look at the Draggable page here for further exploration.

这篇关于可拖动的内部框架类似于Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！