如何在JavaScript或GWT中制作谷歌地图之类的导航？

我想实现一个应用程序，使用类似于谷歌地图的导航

用户应该在尺寸远大于其浏览器尺寸的窗口上导航

导航应通过以下方式完成：

• 按下鼠标并移动鼠标以移动窗口位置
• 上/下鼠标滚轮可放大/缩小
• 左上角的导航元素

我想在窗口上显示html元素。同样重要的是，当您滚动到窗口内容的边缘时，必须加载新内容

下图显示了一个示例：

---

是否有框架、JavaScript库、JQuery库或GWT库来实现这一点？如何实现这一点？

是的，您可以使用纯javascript/css实现这一行为，这一概念被称为“可滚动div”，您需要两个重叠div，顶部的div小于背景中的div。顶部的一个类似于窗口，而背景中的div就是使用“上/左”或“下/右”属性实际移动的div

这是一个名为sprymap.js的流行脚本，我想链接到原始源代码，但看起来好像有人忘记更新域了：

/*
麻省理工学院许可证（MIT）
版权所有（c）2011查理·安德鲁斯
Slawomir Jasinski所做的小修正-现在正在开发IE
特此免费授予获得本软件及相关文档文件（“软件”）副本的任何人在不受限制的情况下经营本软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售本软件副本的权利，并允许向其提供软件的人员在符合以下条件的情况下这样做：
上述版权声明和本许可声明应包含在软件的所有副本或实质部分中。
本软件按“原样”提供，无任何明示或暗示的担保，包括但不限于适销性、特定用途适用性和非侵权性担保。在任何情况下，作者或版权持有人均不对任何索赔、损害赔偿或其他责任负责，无论是合同诉讼、侵权诉讼还是其他诉讼，均由本软件或本软件的使用或其他交易引起，或与本软件或本软件的使用或其他交易有关。
用法：
var map=新的SpryMap({
//正在转换为映射的元素的ID
id:“”，
//地图的宽度（以像素为单位）
宽度：800，
//地图的高度（以像素为单位）
身高：800，
//起始贴图位置的X值
startX:0，
//起始贴图位置的Y值
星号:0,，
//如果贴图应设置为停止动画，则布尔值为true
滚动：对，
//上述滚动持续的时间（毫秒）
时间:300,，
//如果贴图不允许移动超过其边，则布尔值为true
没错，
//附加到包装映射div的CSS类
cssClass:“
//鼠标悬停在地图上时应用的光标CSS样式规则
光标悬停：“自动”
//在地图上拖动鼠标时要应用的光标CSS样式规则
拖动光标：“[闭合指针]”
});
*/
函数SpryMap（param）{
/**
*名称：MoveMap（）
*描述：将贴图移动到给定X和Y偏移的函数。
*请注意，该函数考虑了中的锁定边
*地图。
*参数：x-地图的新x偏移
*y-地图的新y偏移量
*/
函数移动映射（x，y）{
var newX=x，newY=y；
如果（m.lockEdges）{
var righedge=-m.map.offsetWidth+m.viewingBox.offsetWidth，
topEdge=-m.map.offsetHeight+m.viewingBox.offsetHeight；
newX=newX0？0:newX；
newY=newY>0？0:newY；
}
m、 map.style.left=newX+“px”；
m、 map.style.top=newY+“px”；
}
/**
*名称：AddListener（）
*描述：向指定元素添加事件侦听器。
*Parameters:element—正在为其添加侦听器的元素
*事件-正在为其添加侦听器的事件
*f-每次事件发生时调用的函数
*/
函数AddListener（元素、事件、f）{
if（元素附件）{
元素[“e”+事件+f]=f；
元素[事件+f]=函数（）{
元素[“e”+事件+f]（窗口事件）
};
元素.attachEvent（“on”+事件，元素[event+f]）
}else元素。addEventListener（事件，f，false）
}
功能坐标（startX、startY）{
这个.x=startX；
这个。y=星形；
}
var m=这个；
m、 map=document.getElementById（参数id）；
m、 宽度=typeof param.width==“未定义”？800:param.width；
m、 高度=参数高度的类型==“未定义”？800：参数高度；
m、 滚动=参数的类型。滚动==“未定义”？真：参数滚动；
m、 hoverCursor=param.hoverCursor | | |“auto”//如果愿意，“打开的手”样式是：“url”（数据：image/vnd.microsoft.icon；base64，aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af///AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD///8Af///AB///5A///5///8=），默认值“
m、 dragCursor=param.dragCursor | |“url（数据：image/vnd.microsoft.icon；base64，aaacaaaicac
/*
<beginLegalBanter>
The MIT License (MIT)
Copyright (c) 2011 Charlie Andrews
Small fixes made by Slawomir Jasinski - now is working on IE

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
</endLegalBanter>

Usage:
var map = new SpryMap({
   // The ID of the element being transformed into a map
   id : "",
   // The width of the map (in px)
   width: 800,
   // The height of the map (in px)
   height: 800,
   // The X value of the starting map position
   startX: 0,
   // The Y value of the starting map position
   startY: 0,
   // Boolean true if the map should animate to a stop
   scrolling: true,
   // The time (in ms) that the above scrolling lasts
   scrollTime: 300,
   // Boolean true if the map disallows moving past its edges
   lockEdges: true,
   // The CSS class attached to the wrapping map div
   cssClass: ""
   // The cursor CSS style rule to apply when the mouse hovers the map
   hoverCursor: "auto"
   // The cursor CSS style rule to apply when the mouse is dragged on the map
   dragCursor: "[closed hand cursor]"
});
*/
function SpryMap(param) {
    /**
     * Name:        MoveMap()
     * Description: Function that moves the map to a given X and Y offset.
     *              Note that the function takes into account locked edges in the
     *              map.
     * Parameters:  x - The new x offset of the map
     *              y - The new y offset of the map
     */
    function MoveMap(x, y) {
        var newX = x, newY = y;
        if(m.lockEdges) {
            var rightEdge = -m.map.offsetWidth + m.viewingBox.offsetWidth,
                topEdge = -m.map.offsetHeight + m.viewingBox.offsetHeight;
            newX = newX < rightEdge ? rightEdge : newX;
            newY = newY < topEdge ? topEdge : newY;
            newX = newX > 0 ? 0 : newX;
            newY = newY > 0 ? 0 : newY;
        }
        m.map.style.left = newX + "px";
        m.map.style.top = newY + "px";
    }

    /**
     * Name:        AddListener()
     * Description: Adds an event listener to the specified element.
     * Parameters:  element - The element for which the listener is being added
     *              event - The event for which the listener is being added
     *              f - The function being called each time that the event occurs
     */
    function AddListener(element, event, f) {
        if(element.attachEvent) {
            element["e" + event + f] = f;
            element[event + f] = function () {
                element["e" + event + f](window.event)
            };
            element.attachEvent("on" + event, element[event + f])
        } else element.addEventListener(event, f, false)
    }

    function Coordinate(startX, startY) {
        this.x = startX;
        this.y = startY;
    }

    var m = this;
    m.map = document.getElementById(param.id);
    m.width = typeof param.width == "undefined" ? 800 : param.width;
    m.height = typeof param.height == "undefined" ? 800 : param.height;
    m.scrolling = typeof param.scrolling == "undefined" ? true : param.scrolling;
    m.hoverCursor = param.hoverCursor || "auto";    // If you prefer, the "open hand" style is: "url(data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAgACAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=), default"
    m.dragCursor = param.dragCursor || "url(data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAAH/AAAB/wAAA/0AAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//+AB///wAf//4AH//+AD///yT/////////////////////////////8=), default";
    m.scrollTime = typeof param.scrollTime == "undefined" ? 300 : param.scrollTime;
    m.lockEdges = typeof param.lockEdges == "undefined" ? true : param.lockEdges;
    m.viewingBox = document.createElement("div");
    if (typeof param.cssClass != "undefined") m.viewingBox.className = param.cssClass;
    m.viewingBox.style.cursor = m.hoverCursor;
    m.mousePosition = new Coordinate;
    m.mouseLocations = [];
    m.velocity = new Coordinate;
    m.mouseDown = false;
    m.timerId = -1;
    m.timerCount = 0;
    m.map.parentNode.replaceChild(m.viewingBox, m.map);
    m.viewingBox.appendChild(m.map);
    m.viewingBox.style.overflow = "hidden";
    m.viewingBox.style.width = m.width + "px";
    m.viewingBox.style.height = m.height + "px";
    m.viewingBox.style.position = "relative";
    m.map.style.position = "absolute";
    MoveMap(typeof param.startX == "undefined" ? 0 : -param.startX, typeof param.startY == "undefined" ? 0 : -param.startY);

    /**
     * Name:        MouseMove()
     * Description: Function called every time that the mouse moves
     */
    var MouseMove = function (b) {
        var e = b.clientX - m.mousePosition.x + parseInt(m.map.style.left),
            d = b.clientY - m.mousePosition.y + parseInt(m.map.style.top);
        MoveMap(e, d);
        m.mousePosition.x = b.clientX;
        m.mousePosition.y = b.clientY
    };

    /**
     * Name:        OnScrollTimer()
     * Description: Function called every time that the scroll timer fires
     */
    var OnScrollTimer = function () {
        if(m.mouseDown) {
            // Keep track of where the latest mouse location is
            m.mouseLocations.unshift(new Coordinate(m.mousePosition.x,
                                                    m.mousePosition.y));

            // Make sure that we're only keeping track of the last 10 mouse
            // clicks (just for efficiency)
            if(m.mouseLocations.length > 10)
                m.mouseLocations.pop();
        } else {

            var totalTics = m.scrollTime / 20;

            var fractionRemaining = (totalTics - m.timerCount) / totalTics;

            var xVelocity = m.velocity.x * fractionRemaining;
            var yVelocity = m.velocity.y * fractionRemaining;

            MoveMap(-xVelocity + parseInt(m.map.style.left),
                    -yVelocity + parseInt(m.map.style.top));

            // Only scroll for 20 calls of this function
            if(m.timerCount == totalTics) {
                clearInterval(m.timerId);
                m.timerId = -1
            }

            ++m.timerCount;
        }
    };

    /**
     * mousedown event handler
     */
    AddListener(m.viewingBox, "mousedown", function (e) {
        m.viewingBox.style.cursor = m.dragCursor;

        // Save the current mouse position so we can later find how far the
        // mouse has moved in order to scroll that distance
        m.mousePosition.x = e.clientX;
        m.mousePosition.y = e.clientY;

        // Start paying attention to when the mouse moves
        AddListener(document, "mousemove", MouseMove);
        m.mouseDown = true;

        // If the map is set to continue scrolling after the mouse is released,
        // start a timer for that animation
        if(m.scrolling) {
            m.timerCount = 0;

            if(m.timerId != 0)
            {
                clearInterval(m.timerId);
                m.timerId = 0;
            }

            m.timerId = setInterval(OnScrollTimer, 20);
        }

        event.preventDefault ? event.preventDefault() : event.returnValue = false;
    });

    /**
     * mouseup event handler
     */
    AddListener(document, "mouseup", function () {
        if(m.mouseDown) {
            var handler = MouseMove;
            if(document.detachEvent) {
                document.detachEvent("onmousemove", document["mousemove" + handler]);
                document["mousemove" + handler] = null;
            } else {
                document.removeEventListener("mousemove", handler, false);
            }

            m.mouseDown = false;

            if(m.mouseLocations.length > 0) {
                var clickCount = m.mouseLocations.length;
                m.velocity.x = (m.mouseLocations[clickCount - 1].x - m.mouseLocations[0].x) / clickCount;
                m.velocity.y = (m.mouseLocations[clickCount - 1].y - m.mouseLocations[0].y) / clickCount;
                m.mouseLocations.length = 0;
            }
        }

        m.viewingBox.style.cursor = m.hoverCursor;
    });
};