Inhaltsverzeichnis
Ajaxian Maps
Heim Web-Frontend js-Tutorial Maps Javascript_javascript技巧

Maps Javascript_javascript技巧

May 16, 2016 pm 07:20 PM
javascript maps


  
     Ajaxian Maps
  
  <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.
    

    

   
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems

So verwenden Sie insertBefore in Javascript So verwenden Sie insertBefore in Javascript Nov 24, 2023 am 11:56 AM

So verwenden Sie insertBefore in Javascript

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript

See all articles