求一个javascript实现的仿百度map的程序
需求：1、与百度map或googlemap相似，图片采用jpg或tiff格式2、要有鹰眼图（缩略图），拖动地图鹰眼图同步拖动，拖动鹰眼图地图同步拖动3、图片格式很大，需要...
需求：
1、与百度map或google map相似，图片采用jpg或tiff格式
2、要有鹰眼图（缩略图），拖动地图鹰眼图同步拖动，拖动鹰眼图地图同步拖动
3、图片格式很大，需要异步加载，后台下载用java实现
4、实现放大缩小功能，和上下左右移动按钮功能 展开
1、与百度map或google map相似，图片采用jpg或tiff格式
2、要有鹰眼图（缩略图），拖动地图鹰眼图同步拖动，拖动鹰眼图地图同步拖动
3、图片格式很大，需要异步加载，后台下载用java实现
4、实现放大缩小功能，和上下左右移动按钮功能 展开
展开全部
给100WRMB给你做一个
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
100分 会有人给你这样的程序吗
100RMB 我估计也不会吧
100RMB 我估计也不会吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我前段时间做的，不知是否符合要求
首先定义个页面
<html>
<head>
<title>我的地图</title>
<link rel='stylesheet' type='text/css' href='<%=request.getContextPath()%>/css/map.css'/>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/prototype.js'></script>
<script type="text/javascript">
ContextPath = '<%=request.getContextPath()%>';
</script>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/map.js'></script>
</head>
<body onload='InitMapObj()'>
<table border='0' cellspacing='0' cellpadding='0' id='mainTable'>
<tr>
<td height='400' width='600' id='mainTd'> </td>
<td width='20'> </td>
<td height='400' width='41' id='miniatureTd'> </td>
</tr>
</table>
</body>
</html>
prototype.js自己去下载，我用的是1.4版本
脚本存为map.js，其内容如下
//====================初始化页面
//加载控件
function InitMapObj() {
InitMainMap();
InitMiniature();
}
var map = null;
//初始化主地图
function InitMainMap() {
var obj = $('mainTd');
var divobj = document.createElement('div');
divobj.style.cssText = 'position:absolute;width:600px;height:400px;background-color:gray;overflow:hidden;cursor:hand;border:1px solid #000000';
divobj.id = 'd_map';
divobj.style.left = getAbsoluteLeft(obj);
divobj.style.top = getAbsoluteTop(obj);
obj.appendChild(divobj);
map = new CMap(divobj);
map.setCenter(new CPoint(300, 200));
map.config.imgsize = 1024;
map.config.rows = 12;
map.config.cols = 116;
map.init();
}
//初始化缩略图
function InitMiniature() {
var miniature = new Image();
miniature.src = ContextPath + '/images/miniature.jpg';
miniature.alt = '缩略图';
$('miniatureTd').innerHTML = miniature.outerHTML;
InitMiniatureDiv();
}
//====================缩略图功能
//生成缩略图拖动层
function InitMiniatureDiv() {
var divobj = document.createElement('div');
divobj.id = 'floater';
divobj.style.position = 'absolute';
divobj.style.width = '17px';
divobj.style.height = '10px';
divobj.style.overflow = 'hidden';
divobj.style.top = getAbsoluteTop($('miniatureTd')) - 4;
divobj.style.left = getAbsoluteLeft($('miniatureTd')) - 7;
divobj.className = 'trans-div';
divobj.zIndex = 100;
var indivobj = document.createElement('div');
indivobj.style.position = 'relative';
indivobj.style.width = '3px';
indivobj.style.height = '2px';
indivobj.style.top = '3px';
indivobj.style.left = '6px';
indivobj.style.overflow = 'hidden';
indivobj.style.backgroundColor = '#FF0000';
divobj.appendChild(indivobj);
$('miniatureTd').appendChild(divobj);
document.onmousedown = graspMiniature;
document.onmousemove = moveMiniature;
document.onmouseup = dropMiniature;
}
//====================一些公共方法
//得到控件绝对x坐标
function getAbsoluteLeft(htmlObject) {
var xPos = htmlObject.offsetLeft;
var temp = htmlObject.offsetParent;
while(temp != null){
xPos += temp.offsetLeft;
temp = temp.offsetParent;
}
return xPos;
}
//得到控件绝对y坐标
function getAbsoluteTop(htmlObject) {
var yPos = htmlObject.offsetTop;
var temp = htmlObject.offsetParent;
while(temp != null){
yPos += temp.offsetTop;
temp = temp.offsetParent;
}
return yPos;
}
//当前拖放控件x坐标
var currentX = 0;
//当前拖放控件y坐标
var currentY = 0;
//当前拖放控件对象
var whichIt = null;
//抓取控件
function graspMiniature(e) {
whichIt = event.srcElement;
if (whichIt.tagName != 'DIV' && whichIt.id != 'floater') {
return;
}
while (whichIt.id.indexOf('floater') == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) {
return true;
}
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
return true;
}
//移动控件
function moveMiniature(e) {
if (whichIt == null) { return false; }
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
var outerTop = getAbsoluteTop($('miniatureTd'));
var outerLeft = getAbsoluteLeft($('miniatureTd'));
if(whichIt.style.pixelTop < outerTop - 4) {
whichIt.style.pixelTop = outerTop - 4;
}
if(whichIt.style.pixelLeft < outerLeft - 7) {
whichIt.style.pixelLeft = outerLeft - 7;
}
if(whichIt.style.pixelTop > outerTop + 394) {
whichIt.style.pixelTop = outerTop + 394;
}
if(whichIt.style.pixelLeft > outerLeft + 31) {
whichIt.style.pixelLeft = outerLeft + 31;
}
event.returnValue = false;
return false;
}
//释放控件
function dropMiniature() {
if (whichIt != null)
syncMainMap(whichIt.style.pixelLeft, whichIt.style.pixelTop);
whichIt = null;
}
//移动到指定的坐标
function moveMiniatureTo(x, y) {
var floater = $('floater');
var outerLeft = getAbsoluteLeft($('miniatureTd'));
var outerTop = getAbsoluteTop($('miniatureTd'));
floater.style.pixelLeft = x * 41 / 12000 + outerLeft - 7;
floater.style.pixelTop = y * 400 / 118400 + outerTop - 4;
if(floater.style.pixelTop < outerTop - 4) {
floater.style.pixelTop = outerTop - 4;
}
if(floater.style.pixelLeft < outerLeft - 7) {
floater.style.pixelLeft = outerLeft - 7;
}
if(floater.style.pixelTop > outerTop + 394) {
floater.style.pixelTop = outerTop + 394;
}
if(floater.style.pixelLeft > outerLeft + 31) {
floater.style.pixelLeft = outerLeft + 31;
}
event.returnValue = false;
}
//====================主地图与缩略图同步
//同步大地图
function syncMainMap(x, y) {
var outerLeft = getAbsoluteLeft($('miniatureTd'));
var outerTop = getAbsoluteTop($('miniatureTd'));
var tmpx = 0;
var tmpy = 0;
if((x - outerLeft + 8) == 1) {
tmpx = 300;
}
else if ((x - outerLeft + 8) == 40) {
tmpx = 11700;
}
else {
tmpx = (x - outerLeft + 8) * 12000 / 41;
}
if ((y - outerTop + 5) == 1) {
tmpy = 200;
}
else if ((y - outerTop + 5) == 399) {
tmpy = 118200;
}
else {
tmpy = (y - outerTop + 5) * 118400 / 400;
}
tmpx = tmpx > 11700 ? 11700 : tmpx;
tmpx = tmpx < 300 ? 300 : tmpx;
tmpy = tmpy > 118200 ? 118200 : tmpy;
tmpy = tmpy < 200 ? 200 : tmpy;
if(map != null) {
map.setCenter(new CPoint(tmpx, tmpy));
map.reload();
}
}
//同步缩略图
function syncMiniature(x, y) {
var tmpx = (x < 0) ? 0 : x;
var tmpy = (y < 0) ? 0 : y;
moveMiniatureTo(tmpx, tmpy);
}
//====================主地图功能
//坐标点
function CPoint(x, y) {
this.x = x;
this.y = y;
}
//矩形区域
function CSize(width, height) {
this.width = width;
this.height = height;
}
//矩形坐标范围，参数左上点和右下点组成
function CBounds(p1, p2) {
this.minX = p1.x;
this.minY = p1.y;
this.maxX = p2.x;
this.maxY = p2.y;
this.getSize = function() {
return new CSize(this.maxX - this.minX, this.maxY - this.minY);
}
}
//自定义事件处理
window.CEvent = {
addListener: function(obj, target, act) {
if(obj.attachEvent) obj.attachEvent('on' + target, act);
if(obj.addEventListener) obj.addEventListener(target, act, false);
},
removeListener: function(obj, target, act) {
if(obj.detachEvent) obj.detachEvent('on' + target, act);
if(obj.removeEventListener) obj.removeEventListener(target, act, false);
}
}
//地图构造方法
function CMap(div) {
this.holder = div; //地图的载体，即窗口层
this.config = {
imgsize: 256, //小图边长
rows: 10, //图片行数
cols: 10 //图片列数
};
this._center; //实时中心点
this.mvl; //用于移动的层，即移动层
this.mouseopt = { //鼠标在地图上操作选项
down: false, //是否按下
move: false, //是否按下并移动过
dx: 0, dy: 0, //按下时移动层的left和top
ex: 0, ey: 0 //按下时的事件坐标
};
this.mapimage = new Array(); //当前显示的地图集合
this.cacheimage = new Array();//图片对象缓存，避免重复创建和删除IMG对象
}
//地图成员方法(私有)
CMap.prototype = {
//获取一个IMG对象
_getimage: function() {
var img = this.cacheimage.shift();
if(img == null) {
img = document.createElement('IMG');
}
return img;
},
//加载地图
_loadmap: function() {
var bounds = this.getBounds();
var x1 = Math.floor(bounds.minX / this.config.imgsize);
var x2 = Math.ceil(bounds.maxX / this.config.imgsize);
var y1 = Math.floor(bounds.minY / this.config.imgsize);
var y2 = Math.ceil(bounds.maxY / this.config.imgsize);
//设定地图边界
if(x1 < 0) {
x1 = 0;
}
if(y1 < 0) {
y1 = 0;
}
if(x2 > this.config.cols) {
x2 = this.config.cols;
}
if(y2 > this.config.rows) {
y2 = this.config.rows;
}
ShowWaitingDiv();
this.mvl.style.left = -bounds.minX + 'px';
this.mvl.style.top = -bounds.minY + 'px';
for(var y = y1; y < y2; y++) {
for(var x = x1; x < x2; x++) {
var img = this._getimage();
this.mapimage.push(img);
img.style.position = 'absolute';
img.style.backgroundColor = '#AEAEAE';
img.style.left = x * this.config.imgsize + 'px';
img.style.top = y * this.config.imgsize + 'px';
img.style.width = this.config.imgsize + 'px';
img.style.height = this.config.imgsize + 'px';
img.alt = y + ',' + x;
img.src = ContextPath + '/tif/' + y + ',' + x + '.jpg';
this.mvl.appendChild(img);
}
}
},
//地图resize事件，内部函数
_resize: function(evt) {
this.onresize();
this._clearmap();
this._loadmap();
},
//鼠标按下事件
_mapmousedown: function(evt) {
//记录鼠标操作信息
this.mouseopt.down = true;
this.mouseopt.ex = evt.clientX;
this.mouseopt.ey = evt.clientY;
this.mouseopt.dx = this.mvl.offsetLeft;
this.mouseopt.dy = this.mvl.offsetTop;
//为了使鼠标移动到浏览器外部，事件依然有效，IE & firefox
if(this.mvl.setCapture)
this.mvl.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
},
//地图移动事件
_mapmove: function(evt) {
if(this.mouseopt.down == true) {
//拖动时记录鼠标拖动过以及设定移动层的位置
this.mouseopt.move = true;
this.mvl.style.left = this.mouseopt.dx + (evt.clientX - this.mouseopt.ex) + 'px';
this.mvl.style.top = this.mouseopt.dy + (evt.clientY - this.mouseopt.ey) + 'px';
}
},
//鼠标抬起事件
_mapmouseup: function(evt) {
//取消事件捕捉
if(this.mvl.releaseCapture)
this.mvl.releaseCapture();
else if(window.releaseEvents)
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if(this.mouseopt.down == true && this.mouseopt.move == true) {
//重新设定实时中心位置
this._clearmap();
this._center.x = this.holder.offsetWidth / 2 - this.mvl.offsetLeft;
this._center.y = this.holder.offsetHeight / 2 - this.mvl.offsetTop;
this._loadmap();
}
this.mouseopt.down = false;
this.mouseopt.move = false;
//鼠标抬起时同步缩略图
syncMiniature(this._center.x, this._center.y);
},
//清除当前地图图片，放入图片缓存
_clearmap: function() {
var tm;
while((tm = this.mapimage.pop()) != null){
this.mvl.removeChild(tm);
this.cacheimage.push(tm);
}
}
}
//初始化地图
CMap.prototype.init = function() {
//创建移动层
this.holder.style.overflow = 'hidden';
this.mvl = document.createElement('DIV');
this.mvl.style.cssText = 'position:absolute;left:0;top:0;z-index:1';
this.holder.appendChild(this.mvl);
//创建遮盖层
this.cover = document.createElement('DIV');
this.cover.innerHTML = ' ';
this.cover.style.cssText = 'position:relative;left:0;top:0;z-index:2;width:2000px;height:2000px;background-color:gray;filter:alpha(opacity=0);opacity:0;';
this.holder.appendChild(this.cover);
this._loadmap();
//事件绑定
CEvent.addListener(window, 'resize', this._resize.bindAsEventListener(this));
CEvent.addListener(this.holder, 'mousedown', this._mapmousedown.bindAsEventListener(this));
CEvent.addListener(this.holder, 'mousemove', this._mapmove.bindAsEventListener(this));
CEvent.addListener(this.holder, 'mouseup', this._mapmouseup.bindAsEventListener(this));
}
//外部强制重新加载地图
CMap.prototype.reload = function() {
this._loadmap();
}
//地图resize事件，供外部定义函数
CMap.prototype.onresize = function(evt) {
}
//设置地图中心
CMap.prototype.setCenter = function(p) {
this._center = p;
}
//得到地图中心
CMap.prototype.getCenter = function() {
return this._center;
}
//获取地图范围
CMap.prototype.getBounds = function() {
var p1 = new CPoint(this._center.x - this.holder.offsetWidth / 2, this._center.y - this.holder.offsetHeight / 2);
var p2 = new CPoint(this._center.x + this.holder.offsetWidth / 2, this._center.y + this.holder.offsetHeight / 2);
return new CBounds(p1, p2);
}
注意：你的图片存在tif文件夹下，文件格式为.jpg（.tif格式不能被浏览器识别），命名规则为坐标名，用逗号隔开，比如2,4.jpg，同时需要指定你的图片的行列数，大致就是这些，如果有问题站内联系
首先定义个页面
<html>
<head>
<title>我的地图</title>
<link rel='stylesheet' type='text/css' href='<%=request.getContextPath()%>/css/map.css'/>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/prototype.js'></script>
<script type="text/javascript">
ContextPath = '<%=request.getContextPath()%>';
</script>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/map.js'></script>
</head>
<body onload='InitMapObj()'>
<table border='0' cellspacing='0' cellpadding='0' id='mainTable'>
<tr>
<td height='400' width='600' id='mainTd'> </td>
<td width='20'> </td>
<td height='400' width='41' id='miniatureTd'> </td>
</tr>
</table>
</body>
</html>
prototype.js自己去下载，我用的是1.4版本
脚本存为map.js，其内容如下
//====================初始化页面
//加载控件
function InitMapObj() {
InitMainMap();
InitMiniature();
}
var map = null;
//初始化主地图
function InitMainMap() {
var obj = $('mainTd');
var divobj = document.createElement('div');
divobj.style.cssText = 'position:absolute;width:600px;height:400px;background-color:gray;overflow:hidden;cursor:hand;border:1px solid #000000';
divobj.id = 'd_map';
divobj.style.left = getAbsoluteLeft(obj);
divobj.style.top = getAbsoluteTop(obj);
obj.appendChild(divobj);
map = new CMap(divobj);
map.setCenter(new CPoint(300, 200));
map.config.imgsize = 1024;
map.config.rows = 12;
map.config.cols = 116;
map.init();
}
//初始化缩略图
function InitMiniature() {
var miniature = new Image();
miniature.src = ContextPath + '/images/miniature.jpg';
miniature.alt = '缩略图';
$('miniatureTd').innerHTML = miniature.outerHTML;
InitMiniatureDiv();
}
//====================缩略图功能
//生成缩略图拖动层
function InitMiniatureDiv() {
var divobj = document.createElement('div');
divobj.id = 'floater';
divobj.style.position = 'absolute';
divobj.style.width = '17px';
divobj.style.height = '10px';
divobj.style.overflow = 'hidden';
divobj.style.top = getAbsoluteTop($('miniatureTd')) - 4;
divobj.style.left = getAbsoluteLeft($('miniatureTd')) - 7;
divobj.className = 'trans-div';
divobj.zIndex = 100;
var indivobj = document.createElement('div');
indivobj.style.position = 'relative';
indivobj.style.width = '3px';
indivobj.style.height = '2px';
indivobj.style.top = '3px';
indivobj.style.left = '6px';
indivobj.style.overflow = 'hidden';
indivobj.style.backgroundColor = '#FF0000';
divobj.appendChild(indivobj);
$('miniatureTd').appendChild(divobj);
document.onmousedown = graspMiniature;
document.onmousemove = moveMiniature;
document.onmouseup = dropMiniature;
}
//====================一些公共方法
//得到控件绝对x坐标
function getAbsoluteLeft(htmlObject) {
var xPos = htmlObject.offsetLeft;
var temp = htmlObject.offsetParent;
while(temp != null){
xPos += temp.offsetLeft;
temp = temp.offsetParent;
}
return xPos;
}
//得到控件绝对y坐标
function getAbsoluteTop(htmlObject) {
var yPos = htmlObject.offsetTop;
var temp = htmlObject.offsetParent;
while(temp != null){
yPos += temp.offsetTop;
temp = temp.offsetParent;
}
return yPos;
}
//当前拖放控件x坐标
var currentX = 0;
//当前拖放控件y坐标
var currentY = 0;
//当前拖放控件对象
var whichIt = null;
//抓取控件
function graspMiniature(e) {
whichIt = event.srcElement;
if (whichIt.tagName != 'DIV' && whichIt.id != 'floater') {
return;
}
while (whichIt.id.indexOf('floater') == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) {
return true;
}
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
return true;
}
//移动控件
function moveMiniature(e) {
if (whichIt == null) { return false; }
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
var outerTop = getAbsoluteTop($('miniatureTd'));
var outerLeft = getAbsoluteLeft($('miniatureTd'));
if(whichIt.style.pixelTop < outerTop - 4) {
whichIt.style.pixelTop = outerTop - 4;
}
if(whichIt.style.pixelLeft < outerLeft - 7) {
whichIt.style.pixelLeft = outerLeft - 7;
}
if(whichIt.style.pixelTop > outerTop + 394) {
whichIt.style.pixelTop = outerTop + 394;
}
if(whichIt.style.pixelLeft > outerLeft + 31) {
whichIt.style.pixelLeft = outerLeft + 31;
}
event.returnValue = false;
return false;
}
//释放控件
function dropMiniature() {
if (whichIt != null)
syncMainMap(whichIt.style.pixelLeft, whichIt.style.pixelTop);
whichIt = null;
}
//移动到指定的坐标
function moveMiniatureTo(x, y) {
var floater = $('floater');
var outerLeft = getAbsoluteLeft($('miniatureTd'));
var outerTop = getAbsoluteTop($('miniatureTd'));
floater.style.pixelLeft = x * 41 / 12000 + outerLeft - 7;
floater.style.pixelTop = y * 400 / 118400 + outerTop - 4;
if(floater.style.pixelTop < outerTop - 4) {
floater.style.pixelTop = outerTop - 4;
}
if(floater.style.pixelLeft < outerLeft - 7) {
floater.style.pixelLeft = outerLeft - 7;
}
if(floater.style.pixelTop > outerTop + 394) {
floater.style.pixelTop = outerTop + 394;
}
if(floater.style.pixelLeft > outerLeft + 31) {
floater.style.pixelLeft = outerLeft + 31;
}
event.returnValue = false;
}
//====================主地图与缩略图同步
//同步大地图
function syncMainMap(x, y) {
var outerLeft = getAbsoluteLeft($('miniatureTd'));
var outerTop = getAbsoluteTop($('miniatureTd'));
var tmpx = 0;
var tmpy = 0;
if((x - outerLeft + 8) == 1) {
tmpx = 300;
}
else if ((x - outerLeft + 8) == 40) {
tmpx = 11700;
}
else {
tmpx = (x - outerLeft + 8) * 12000 / 41;
}
if ((y - outerTop + 5) == 1) {
tmpy = 200;
}
else if ((y - outerTop + 5) == 399) {
tmpy = 118200;
}
else {
tmpy = (y - outerTop + 5) * 118400 / 400;
}
tmpx = tmpx > 11700 ? 11700 : tmpx;
tmpx = tmpx < 300 ? 300 : tmpx;
tmpy = tmpy > 118200 ? 118200 : tmpy;
tmpy = tmpy < 200 ? 200 : tmpy;
if(map != null) {
map.setCenter(new CPoint(tmpx, tmpy));
map.reload();
}
}
//同步缩略图
function syncMiniature(x, y) {
var tmpx = (x < 0) ? 0 : x;
var tmpy = (y < 0) ? 0 : y;
moveMiniatureTo(tmpx, tmpy);
}
//====================主地图功能
//坐标点
function CPoint(x, y) {
this.x = x;
this.y = y;
}
//矩形区域
function CSize(width, height) {
this.width = width;
this.height = height;
}
//矩形坐标范围，参数左上点和右下点组成
function CBounds(p1, p2) {
this.minX = p1.x;
this.minY = p1.y;
this.maxX = p2.x;
this.maxY = p2.y;
this.getSize = function() {
return new CSize(this.maxX - this.minX, this.maxY - this.minY);
}
}
//自定义事件处理
window.CEvent = {
addListener: function(obj, target, act) {
if(obj.attachEvent) obj.attachEvent('on' + target, act);
if(obj.addEventListener) obj.addEventListener(target, act, false);
},
removeListener: function(obj, target, act) {
if(obj.detachEvent) obj.detachEvent('on' + target, act);
if(obj.removeEventListener) obj.removeEventListener(target, act, false);
}
}
//地图构造方法
function CMap(div) {
this.holder = div; //地图的载体，即窗口层
this.config = {
imgsize: 256, //小图边长
rows: 10, //图片行数
cols: 10 //图片列数
};
this._center; //实时中心点
this.mvl; //用于移动的层，即移动层
this.mouseopt = { //鼠标在地图上操作选项
down: false, //是否按下
move: false, //是否按下并移动过
dx: 0, dy: 0, //按下时移动层的left和top
ex: 0, ey: 0 //按下时的事件坐标
};
this.mapimage = new Array(); //当前显示的地图集合
this.cacheimage = new Array();//图片对象缓存，避免重复创建和删除IMG对象
}
//地图成员方法(私有)
CMap.prototype = {
//获取一个IMG对象
_getimage: function() {
var img = this.cacheimage.shift();
if(img == null) {
img = document.createElement('IMG');
}
return img;
},
//加载地图
_loadmap: function() {
var bounds = this.getBounds();
var x1 = Math.floor(bounds.minX / this.config.imgsize);
var x2 = Math.ceil(bounds.maxX / this.config.imgsize);
var y1 = Math.floor(bounds.minY / this.config.imgsize);
var y2 = Math.ceil(bounds.maxY / this.config.imgsize);
//设定地图边界
if(x1 < 0) {
x1 = 0;
}
if(y1 < 0) {
y1 = 0;
}
if(x2 > this.config.cols) {
x2 = this.config.cols;
}
if(y2 > this.config.rows) {
y2 = this.config.rows;
}
ShowWaitingDiv();
this.mvl.style.left = -bounds.minX + 'px';
this.mvl.style.top = -bounds.minY + 'px';
for(var y = y1; y < y2; y++) {
for(var x = x1; x < x2; x++) {
var img = this._getimage();
this.mapimage.push(img);
img.style.position = 'absolute';
img.style.backgroundColor = '#AEAEAE';
img.style.left = x * this.config.imgsize + 'px';
img.style.top = y * this.config.imgsize + 'px';
img.style.width = this.config.imgsize + 'px';
img.style.height = this.config.imgsize + 'px';
img.alt = y + ',' + x;
img.src = ContextPath + '/tif/' + y + ',' + x + '.jpg';
this.mvl.appendChild(img);
}
}
},
//地图resize事件，内部函数
_resize: function(evt) {
this.onresize();
this._clearmap();
this._loadmap();
},
//鼠标按下事件
_mapmousedown: function(evt) {
//记录鼠标操作信息
this.mouseopt.down = true;
this.mouseopt.ex = evt.clientX;
this.mouseopt.ey = evt.clientY;
this.mouseopt.dx = this.mvl.offsetLeft;
this.mouseopt.dy = this.mvl.offsetTop;
//为了使鼠标移动到浏览器外部，事件依然有效，IE & firefox
if(this.mvl.setCapture)
this.mvl.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
},
//地图移动事件
_mapmove: function(evt) {
if(this.mouseopt.down == true) {
//拖动时记录鼠标拖动过以及设定移动层的位置
this.mouseopt.move = true;
this.mvl.style.left = this.mouseopt.dx + (evt.clientX - this.mouseopt.ex) + 'px';
this.mvl.style.top = this.mouseopt.dy + (evt.clientY - this.mouseopt.ey) + 'px';
}
},
//鼠标抬起事件
_mapmouseup: function(evt) {
//取消事件捕捉
if(this.mvl.releaseCapture)
this.mvl.releaseCapture();
else if(window.releaseEvents)
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if(this.mouseopt.down == true && this.mouseopt.move == true) {
//重新设定实时中心位置
this._clearmap();
this._center.x = this.holder.offsetWidth / 2 - this.mvl.offsetLeft;
this._center.y = this.holder.offsetHeight / 2 - this.mvl.offsetTop;
this._loadmap();
}
this.mouseopt.down = false;
this.mouseopt.move = false;
//鼠标抬起时同步缩略图
syncMiniature(this._center.x, this._center.y);
},
//清除当前地图图片，放入图片缓存
_clearmap: function() {
var tm;
while((tm = this.mapimage.pop()) != null){
this.mvl.removeChild(tm);
this.cacheimage.push(tm);
}
}
}
//初始化地图
CMap.prototype.init = function() {
//创建移动层
this.holder.style.overflow = 'hidden';
this.mvl = document.createElement('DIV');
this.mvl.style.cssText = 'position:absolute;left:0;top:0;z-index:1';
this.holder.appendChild(this.mvl);
//创建遮盖层
this.cover = document.createElement('DIV');
this.cover.innerHTML = ' ';
this.cover.style.cssText = 'position:relative;left:0;top:0;z-index:2;width:2000px;height:2000px;background-color:gray;filter:alpha(opacity=0);opacity:0;';
this.holder.appendChild(this.cover);
this._loadmap();
//事件绑定
CEvent.addListener(window, 'resize', this._resize.bindAsEventListener(this));
CEvent.addListener(this.holder, 'mousedown', this._mapmousedown.bindAsEventListener(this));
CEvent.addListener(this.holder, 'mousemove', this._mapmove.bindAsEventListener(this));
CEvent.addListener(this.holder, 'mouseup', this._mapmouseup.bindAsEventListener(this));
}
//外部强制重新加载地图
CMap.prototype.reload = function() {
this._loadmap();
}
//地图resize事件，供外部定义函数
CMap.prototype.onresize = function(evt) {
}
//设置地图中心
CMap.prototype.setCenter = function(p) {
this._center = p;
}
//得到地图中心
CMap.prototype.getCenter = function() {
return this._center;
}
//获取地图范围
CMap.prototype.getBounds = function() {
var p1 = new CPoint(this._center.x - this.holder.offsetWidth / 2, this._center.y - this.holder.offsetHeight / 2);
var p2 = new CPoint(this._center.x + this.holder.offsetWidth / 2, this._center.y + this.holder.offsetHeight / 2);
return new CBounds(p1, p2);
}
注意：你的图片存在tif文件夹下，文件格式为.jpg（.tif格式不能被浏览器识别），命名规则为坐标名，用逗号隔开，比如2,4.jpg，同时需要指定你的图片的行列数，大致就是这些，如果有问题站内联系
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你给多少钱啊?
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
