functioninit(){
//让innerdiv足够大，以正确显示出地图
setInnerDivSize(zoomSizes[zoom][0],zoomSizes[zoom][1]);
//为拖曳操作绑定鼠标监听器
varouterDiv=document.getElementById("outerDiv");
outerDiv.onmousedown=startMove;
outerDiv.onmousemove=processMove;
outerDiv.onmouseup=stopMove;
//在IE中支持拖曳所必须
outerDiv.ondragstart=function()
{returnfalse;}
//解决在IE中触发器div的透明度问题
newOpacityObject('toggleZoomDiv','resource/images/zoom').setBackground();
newOpacityObject('togglePushPinDiv','resource/images/pushpin').setBackground();
checkTiles();
}

functionstartMove(event){
//针对IE必需
if(!event)event=window.event;
dragStartLeft=event.clientX;
dragStartTop=event.clientY;
varinnerDiv=document.getElementById("innerDiv");
innerDiv.style.cursor="-moz-grab";

top=stripPx(innerDiv.style.top);
left=stripPx(innerDiv.style.left);

dragging=true;
returnfalse;
}

functionprocessMove(event){
if(!event)event=window.event;//forIE
varinnerDiv=document.getElementById("innerDiv");
if(dragging){
innerDiv.style.top=parseFloat(top)+(event.clientY-dragStartTop);
innerDiv.style.left=parseFloat(left)+(event.clientX-dragStartLeft);
}
checkTiles();
}

functioncheckTiles(){
//检查在innerdiv中将显示哪个标题
varvisibleTiles=getVisibleTiles();
//当把每个小地图快添加到innerdiv中时，要先检查其是否已经添加
varinnerDiv=document.getElementById("innerDiv");
varvisibleTilesMap={};
for(i=0;i{
vartileArray=visibleTiles[i];
vartileName="x"+tileArray[0]+"y"+tileArray[1]+"z"+zoom;
visibleTilesMap[tileName]=true;
varimg=document.getElementById(tileName);
if(!img){
img=document.createElement("img");
img.src="resource/tiles/"+tileName+".jpg";
img.style.position="absolute";
img.style.left=(tileArray[0]*tileSize)+"px";
img.style.top=(tileArray[1]*tileSize)+"px";
img.style.zIndex=0;
img.setAttribute("id",tileName);
innerDiv.appendChild(img);
}
}
varimgs=innerDiv.getElementByTagName("img");
for(i=0;ivarid=imgs[i].getAttribute("id");
if(!visibleTilesMap[id]){
innerDiv.removeChild(imgs[i]);
i--;//compensateforlivenodeslist
}
}
}

functiongetVisibleTiles(){
varinnerDiv=document.getElementById("innerDiv");
varmapX=stripPx(innerDiv.style.left);
varmapY=stripPx(innerDiv.style.top);
varstartX=Math.abs(Math.floor(mapX/tileSize))-1;
varstartY=Math.abs(Math.floor(mapY/tileSize))-1;
vartilesX=Math.ceil(viewportWidth/tileSize)+1;
vartilesY=Math.ceil(viewportHeight/tileSize)+1;
varvisibleTileArray=[];
varcounter=0;
for(x=startX;x<(tilesX+startX);x++){
for(y=startY;y<(tilesY+startY);y++){
visibleTileArray[counter++]=[x,y];
}
}
returnvisibleTileArray;
}

functionstopMove(){
varinnerDiv=document.getElementById("innerDiv");
innerDiv.style.cursor="";
dragging=false;
}

functionstripPx(value){
if(value=="")return0;
returnparseFloat(value.substring(0,value.length-2));
}

functionsetInnerDivSize(width,height){
varinnerDiv=document.getElementById("innerDiv");
innerDiv.style.width=width;
innerDiv.style.height=height;
}

functiontoggleZoom(){
zoom=(zoom==0)?1:0;
varinnerDiv=document.getElementById("innerDiv");
varimgs=innerDiv.getElementsByTagName("img");
while(imgs.length>0)innerDiv.removeChild(imgs[0]);
setInnerDivSize(zoomSizes[zoom][0],zoomSizes[zoom][1]);
if(document.getElementById("pushPin"))togglePushPin();
checkTiles();
}

functiontogglePushPin(){
varpinImage=document.getElementById("pushPin");
if(pinImage){
pinImage.parentNode.removeChild(pinImage);
vardialog=document.getElementById("pinDialog");
dialog.parentNode.removeChild(dialog);
return;
}

varinnerDiv=document.getElementById("innerDiv");
pinImage=document.createElement("div");
pinImage.style.position="absolute";
pinImage.style.left=(zoom==0)?"850px":"630px";
pinImage.style.top=(zoom==0)?"570px":"420px";
pinImage.style.width="37px";
pinImage.style.height="34px";
pinImage.zIndex=1;
pinImage.setAttribute("id","pushPin");
innerDiv.appendChild(pinImage);

newOpacityObject("pubshPin","resource/images/pin").setBackground();
vardialog=document.createElement("div");
dialog.style.position="absolute";
dialog.style.left=(stripPx(pinImage.style.left)-90)+"px";
dialog.style.top=(stripPx(pinImage.style.top)-210)+"px";
dialog.style.width="309px";
dialog.style.height="229px";
dialog.style.zIndex=2;
dialog.setAttribute("id","pinDialog");
dialog.innerHTML=""+"ThecapitalofSpain";
innerDiv.appendChild(dialog);
newOpacityObject('pinDialog','resource/images/dialog').setBackground();
}

AjaxianMaps