Maps Javascript_javascript技巧

  
     
  
  <script></script>
  <script></script>
  <script> <BR> //常数 <BR> var viewportWidth=800; <BR> var viewportHeight=600; <BR> var tileSize=100; <BR> var zoom=0; <BR> var zoomSizes=[["2000px","1400px"],["1500px","1050px"]]; <BR> //用来控制地图div的移动 <BR> var dragging=false; <BR> var top; <BR> var left; <BR> var dragStartTop; <BR> var dragStartLeft; <br><br> function init(){ <BR> //让inner div足够大，以正确显示出地图 <BR> setInnerDivSize(zoomSizes[zoom][0],zoomSizes[zoom][1]); <BR> //为拖曳操作绑定鼠标监听器 <BR> var outerDiv=document.getElementById("outerDiv"); <BR> outerDiv.onmousedown=startMove; <BR> outerDiv.onmousemove=processMove; <BR> outerDiv.onmouseup=stopMove; <BR> //在IE中支持拖曳所必须 <BR> outerDiv.ondragstart=function() <BR> { return false;} <BR> //解决在IE中触发器div的透明度问题 <BR> new OpacityObject('toggleZoomDiv','resource/images/zoom').setBackground(); <BR> new OpacityObject('togglePushPinDiv','resource/images/pushpin').setBackground(); <BR> checkTiles(); <BR> } <br><br> function startMove(event){ <BR> //针对IE必需 <BR> if(!event)event=window.event; <BR> dragStartLeft=event.clientX; <BR> dragStartTop=event.clientY; <BR> var innerDiv=document.getElementById("innerDiv"); <BR> innerDiv.style.cursor="-moz-grab"; <br><br> top=stripPx(innerDiv.style.top); <BR> left=stripPx(innerDiv.style.left); <br><br> dragging=true; <BR> return false; <BR> } <br><br> function processMove(event){ <BR> if(!event)event=window.event; //for IE <BR> var innerDiv=document.getElementById("innerDiv"); <BR> if(dragging){ <BR> innerDiv.style.top=parseFloat(top)+(event.clientY-dragStartTop); <BR> innerDiv.style.left=parseFloat(left)+(event.clientX-dragStartLeft); <BR> } <BR> checkTiles(); <BR> } <br><br> function checkTiles(){ <BR> //检查在inner div中将显示哪个标题 <BR> var visibleTiles=getVisibleTiles(); <BR> //当把每个小地图快添加到inner div中时，要先检查其是否已经添加 <BR> var innerDiv=document.getElementById("innerDiv"); <BR> var visibleTilesMap={}; <BR> for (i=0;i<visibleTiles.length ;i++) <BR> { <BR> var tileArray=visibleTiles[i]; <BR> var tileName="x"+tileArray[0]+"y"+tileArray[1]+"z"+zoom; <BR> visibleTilesMap[tileName]=true; <BR> var img=document.getElementById(tileName); <BR> if(!img){ <BR> img=document.createElement("img"); <BR> img.src="resource/tiles/"+tileName+".jpg"; <BR> img.style.position="absolute"; <BR> img.style.left=(tileArray[0]*tileSize)+"px"; <BR> img.style.top=(tileArray[1]*tileSize)+"px"; <BR> img.style.zIndex=0; <BR> img.setAttribute("id",tileName); <BR> innerDiv.appendChild(img); <BR> } <BR> } <BR> var imgs=innerDiv.getElementByTagName("img"); <BR> for(i=0;i<img s.length;i++){ <BR alt="Maps Javascript_javascript技巧" > var id=imgs[i].getAttribute("id"); <BR> if(!visibleTilesMap[id]){ <BR> innerDiv.removeChild(imgs[i]); <BR> i--;//compensate for live nodeslist <BR> } <BR> } <BR> } <br><br> function getVisibleTiles(){ <BR> var innerDiv=document.getElementById("innerDiv"); <BR> var mapX=stripPx(innerDiv.style.left); <BR> var mapY=stripPx(innerDiv.style.top); <BR> var startX=Math.abs(Math.floor(mapX/tileSize))-1; <BR> var startY=Math.abs(Math.floor(mapY/tileSize))-1; <BR> var tilesX=Math.ceil(viewportWidth/tileSize)+1; <BR> var tilesY=Math.ceil(viewportHeight/tileSize)+1; <BR> var visibleTileArray=[]; <BR> var counter=0; <BR> for(x=startX;x<(tilesX+startX);x++){ <BR> for(y=startY;y<(tilesY+startY);y++){ <BR> visibleTileArray[counter++]=[x,y]; <BR> } <BR> } <BR> return visibleTileArray; <BR> } <br><br> function stopMove(){ <BR> var innerDiv=document.getElementById("innerDiv"); <BR> innerDiv.style.cursor=""; <BR> dragging=false; <BR> } <br><br> function stripPx(value){ <BR> if(value=="")return 0; <BR> return parseFloat(value.substring(0,value.length-2)); <BR> } <br><br> function setInnerDivSize(width,height){ <BR> var innerDiv=document.getElementById("innerDiv"); <BR> innerDiv.style.width=width; <BR> innerDiv.style.height=height; <BR> } <br><br> function toggleZoom(){ <BR> zoom=(zoom==0)?1:0; <BR> var innerDiv=document.getElementById("innerDiv"); <BR> var imgs=innerDiv.getElementsByTagName("img"); <BR> while(imgs.length>0)innerDiv.removeChild(imgs[0]); <BR> setInnerDivSize(zoomSizes[zoom][0],zoomSizes[zoom][1]); <BR> if(document.getElementById("pushPin"))togglePushPin(); <BR> checkTiles(); <BR> } <br><br> function togglePushPin(){ <BR> var pinImage=document.getElementById("pushPin"); <BR> if(pinImage){ <BR> pinImage.parentNode.removeChild(pinImage); <BR> var dialog=document.getElementById("pinDialog"); <BR> dialog.parentNode.removeChild(dialog); <BR> return; <BR> } <br><br> var innerDiv=document.getElementById("innerDiv"); <BR> pinImage=document.createElement("div"); <BR> pinImage.style.position="absolute"; <BR> pinImage.style.left=(zoom==0)?"850px":"630px"; <BR> pinImage.style.top=(zoom==0)?"570px":"420px"; <BR> pinImage.style.width="37px"; <BR> pinImage.style.height="34px"; <BR> pinImage.zIndex=1; <BR> pinImage.setAttribute("id","pushPin"); <BR> innerDiv.appendChild(pinImage); <br><br> new OpacityObject("pubshPin","resource/images/pin").setBackground(); <BR> var dialog=document.createElement("div"); <BR> dialog.style.position="absolute"; <BR> dialog.style.left=(stripPx(pinImage.style.left)-90)+"px"; <BR> dialog.style.top=(stripPx(pinImage.style.top)-210)+"px"; <BR> dialog.style.width="309px"; <BR> dialog.style.height="229px"; <BR> dialog.style.zIndex=2; <BR> dialog.setAttribute("id","pinDialog"); <BR> dialog.innerHTML="<table style="max-width:90%" width='100%'>"+"<tr><td align='center'>The capital of Spain"; <BR> innerDiv.appendChild(dialog); <BR> new OpacityObject('pinDialog','resource/images/dialog').setBackground(); <BR> } <BR> </script>
   
   
       

       

Ajaxian Maps

    
    

       

    

    

    

    

            The rain in Spain falls mainly in the plains.