<html>
<head>
<title>AjaxianMaps</title>
<styletype="text/css">
h1{
font:20ptsans-serif;
}
#outerDiv{
height:600px;
width:800px;
border:1pxsolidblack;
position:relative;
overflow:hidden;
}
#innerDiv{
position:relative;
left:0px;
top:0px;
}
#toggleZoomDiv{
position:absolute;
top:10px;
left:10px;
z-index:1
width:72px;
height:30px;
}
#togglePushPinDiv{
position:absolute;
top:10px;
left:87px;
z-index:1;
width:72px;
height:30px
}
</style>
<scriptlanguage="javascript"src="resource/js/browserdetect_lite.js"type="text/javascript"></script>
<scriptlanguage="javascript"src="resource/js/opacity.js"type="text/javascript"></script>
<scripttype="text/javascript"language="javascript">
//常数
varviewportWidth=800;
varviewportHeight=600;
vartileSize=100;
varzoom=0;
varzoomSizes=[["2000px","1400px"],["1500px","1050px"]];
//用来控制地图div的移动
vardragging=false;
vartop;
varleft;
vardragStartTop;
vardragStartLeft;
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<visibleTiles.length;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;i<imgs.length;i++){
varid=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="<tableheight='80%'width='100%'>"+"<tr><tdalign='center'>ThecapitalofSpain</td></tr></table>";
innerDiv.appendChild(dialog);
newOpacityObject('pinDialog','resource/images/dialog').setBackground();
}
</script>
</head>
<bodyonload="init()">
<p>
<h1>AjaxianMaps</h1>
</p>
<divid="outerDiv">
<divid="toggleZoomDiv"onclick="toggleZoom()">
</div>
<divid="togglePushPinDiv"onclick="togglePushPin()">
</div>
<divid="innerDiv">
TheraininSpainfallsmainlyintheplains.
</div>
</div>
</body>
</html>