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
var map = $("#map"),
canvas = map.find(".map-canvas");
var maxLeft = map.width()-canvas.width(),
maxTop = map.height()-canvas.height();
canvas.draggable({
drag: function(e, ui) {
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;
}
}
});
放置标记
可以在地图上放置标记(或其他内容)。这很容易,坐标是基于画布内的像素。在测试案例中,标记距离画布左侧和顶部均为150像素。
$("<div></div>")
.addClass("map-marker")
.appendTo(canvas)
.offset(function(){
return { left: 150, top: 150 };
})
.append("<span><- Dot</span>");
现在我们来讲一些更高级的内容,即(臭名昭著的)谷歌地图图钉。
var pin =
$("<div></div>")
.addClass("google-pin")
.appendTo(canvas)
.offset(function(){
return { left: 50, top: 50 };
})
.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 };
});
}
})
.draggable({
start: function(e,ui){
ui.helper.offset(function(){
return { top: ui.offset.top-2 };
});
},
container: canvas
});
查看 jsFiddle上的测试用例