Maps Javascript

　　<html>

　　<head>

　　<title>Ajaxian Maps</title>

　　h1{

　　font:20pt sans-serif;

　　}

　　#outerDiv{

　　height:600px;

　　width:800px;

　　border:1px solid black;

　　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>

　　//常数

　　var viewportWidth=800;

　　var viewportHeight=600;

　　var tileSize=100;

　　var zoom=0;

　　var zoomSizes=[["2000px","1400px"],["1500px","1050px"]];

　　//用来控制地图div的移动

　　var dragging=false;

　　var top;

　　var left;

　　var dragStartTop;

　　var dragStartLeft;

　　function init(){

　　//让inner div足够大，以正确显示出地图

　　setInnerDivSize(zoomSizes[zoom][0],zoomSizes[zoom][1]);

　　//为拖曳操作绑定鼠标监听器

　　var outerDiv=document.getElementById("outerDiv");

　　outerDiv.onmousedown=startMove;

　　outerDiv.onmousemove=processMove;

　　outerDiv.onmouseup=stopMove;

　　//在IE中支持拖曳所必须

　　outerDiv.ondragstart=function()

　　{ return false;}

　　//解决在IE中触发器div的透明度问题

　　new OpacityObject('toggleZoomDiv','resource/images/zoom').setBackground();

　　new OpacityObject('togglePushPinDiv','resource/images/pushpin').setBackground();

　　checkTiles();

　　}

　　function startMove(event){

　　//针对IE必需

　　if(!event)event=window.event;

　　dragStartLeft=event.clientX;

　　dragStartTop=event.clientY;

　　var innerDiv=document.getElementById("innerDiv");

　　innerDiv.style.cursor="-moz-grab";

　　top=stripPx(innerDiv.style.top);

　　left=stripPx(innerDiv.style.left);

　　dragging=true;

　　return false;

　　}

　　function processMove(event){

　　if(!event)event=window.event; //for IE

　　var innerDiv=document.getElementById("innerDiv");

　　if(dragging){

　　innerDiv.style.top=parseFloat(top)+(event.clientY-dragStartTop);

　　innerDiv.style.left=parseFloat(left)+(event.clientX-dragStartLeft);

　　}

　　checkTiles();

　　}

　　function checkTiles(){

　　//检查在inner div中将显示哪个标题

　　var visibleTiles=getVisibleTiles();

　　//当把每个小地图快添加到inner div中时，要先检查其是否已经添加

　　var innerDiv=document.getElementById("innerDiv");

　　var visibleTilesMap={};

　　for (i=0;i<visibleTiles.length ;i++)

　　{

　　var tileArray=visibleTiles[i];

　　var tileName="x"+tileArray[0]+"y"+tileArray[1]+"z"+zoom;

　　visibleTilesMap[tileName]=true;

　　var img=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);

　　}

　　var imgs=innerDiv.getElementByTagName("img");

　　for(i=0;i<imgs.length;i++){

　　var id=imgs[i].getAttribute("id");

　　if(!visibleTilesMap[id]){

　　innerDiv.removeChild(imgs[i]);

　　i--;//compensate for live nodeslist

　　}

　　function getVisibleTiles(){

　　var innerDiv=document.getElementById("innerDiv");

　　var mapX=stripPx(innerDiv.style.left);

　　var mapY=stripPx(innerDiv.style.top);

　　var startX=Math.abs(Math.floor(mapX/tileSize))-1;

　　var startY=Math.abs(Math.floor(mapY/tileSize))-1;

　　var tilesX=Math.ceil(viewportWidth/tileSize)+1;

　　var tilesY=Math.ceil(viewportHeight/tileSize)+1;

　　var visibleTileArray=[];

　　var counter=0;

　　for(x=startX;x<(tilesX+startX);x++){

　　for(y=startY;y<(tilesY+startY);y++){

　　visibleTileArray[counter++]=[x,y];

　　}

　　return visibleTileArray;

　　}

　　function stopMove(){

　　var innerDiv=document.getElementById("innerDiv");

　　innerDiv.style.cursor="";

　　dragging=false;

　　}

　　function stripPx(value){

　　if(value=="")return 0;

　　return parseFloat(value.substring(0,value.length-2));

　　}

　　function setInnerDivSize(width,height){

　　var innerDiv=document.getElementById("innerDiv");

　　innerDiv.style.width=width;

　　innerDiv.style.height=height;

　　}

　　function toggleZoom(){

　　zoom=(zoom==0)?1:0;

　　var innerDiv=document.getElementById("innerDiv");

　　var imgs=innerDiv.getElementsByTagName("img");

　　while(imgs.length>0)innerDiv.removeChild(imgs[0]);

　　setInnerDivSize(zoomSizes[zoom][0],zoomSizes[zoom][1]);

　　if(document.getElementById("pushPin"))togglePushPin();

　　checkTiles();

　　}

　　function togglePushPin(){

　　var pinImage=document.getElementById("pushPin");

　　if(pinImage){

　　pinImage.parentNode.removeChild(pinImage);

　　var dialog=document.getElementById("pinDialog");

　　dialog.parentNode.removeChild(dialog);

　　return;

　　}

　　var innerDiv=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);

　　new OpacityObject("pubshPin","resource/images/pin").setBackground();

　　var dialog=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="<table height='80%' width='100%'>"+"<tr><td align='center'>The capital of Spain</td></tr></table>";

　　innerDiv.appendChild(dialog);

　　new OpacityObject('pinDialog','resource/images/dialog').setBackground();

　　}

　　</script>

　　</head>

　　<p>

　　<h1>Ajaxian Maps</h1>

　　</p>

　　</div>

　　</div>

　　The rain in Spain falls mainly in the plains.

　　</div>

　　</body>

　　</html>

教程首页更多教程