是否可以通过拖动来改变背景的位置？ [英] Is it possible to change background position by dragging?

问题描述

我有一个使用世界地图的图像为背景一个HTML地图。

I have a html map that uses world map image as its background.

我可以做一个js函数，改变div的背景的位置，但我想改变背景位置时，地图在用户点击然后拖动像谷歌地图。

I can make a js function that changes div's background position, but I like to change background position when user click on the map then drag like google map.

所以我在这里有一个示例页面//lab.qa$c$c。 COM /地图它使用 HTTP：//lab.qa$c$ c.com/map/map.jpg

so I have a sample page here: http://lab.qacode.com/map which uses http://lab.qacode.com/map/map.jpg

我想AP preciate任何建议或提示。

I would appreciate any advice or tip.

推荐答案

一个简单的方法，使这项工作是使用jQuery UI的拖动

An easy way to make this work is to use jQuery UI's draggable

HTML

<div id="map">
    <div class="map-canvas"></div>    
</div>

的JavaScript

// Pre-select elements
var map = $("#map"),
    canvas = map.find(".map-canvas");

// Calculate canvas constraints
var maxLeft = map.width()-canvas.width(),
    maxTop = map.height()-canvas.height();

// Make canvas draggable
canvas.draggable({
    drag: function(e, ui) {
        // Check if canvas is within constraints
        if (ui.position.left > 0) {
            ui.position.left = 0;
        } else if (ui.position.left < maxLeft) {
            ui.position.left = maxLeft;
        }
        if (ui.position.top > 0) {
            ui.position.top = 0;
        } else if (ui.position.top < maxTop) {
            ui.position.top = maxTop;
        }
    }
});

放置标记

这是可以放置一个标记（或其他）在地图上。这是很容易的，并且COORDS基于画布内的像素。在测试情况下，标记它为150px左和画布之上。

It's possible to place a marker (or whatever) on the map. It's very easy, and the coords are based on pixels within the canvas. For the marker in the test case it's 150px from left and top of canvas.

// 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>");

现在的东西更先进一点，即（中）著名的谷歌地图针。

Now to something a little more advanced, namely the (in)famous Google Maps 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
    });

请参阅测试用例上的jsfiddle

这篇关于是否可以通过拖动来改变背景的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！