Maps Javascript


Posted in Javascript onJanuary 22, 2007

<html>
  <head>
     <title>Ajaxian Maps</title>
  <style type="text/css">
     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>
  <script language="javascript" src="resource/js/browserdetect_lite.js" type="text/javascript"></script>
  <script language="javascript" src="resource/js/opacity.js" type="text/javascript"></script>
  <script type="text/javascript" language="javascript">
     //常数
  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>
   <body onload="init()">
       <p>
       <h1>Ajaxian Maps</h1>
    </p>
    <div id="outerDiv">
       <div id="toggleZoomDiv" onclick="toggleZoom()">
    </div>
    <div id="togglePushPinDiv" onclick="togglePushPin()">
    </div>
    <div id="innerDiv" style="z-index:0">
            The rain in Spain falls mainly in the plains.
    </div>
    </div>
   </body>
</html>

Javascript 相关文章推荐
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
详谈Node.js之操作文件系统
Aug 29 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
自适应高度框架 ----属个人收藏内容
Jan 22 #Javascript
Opacity.js
Jan 22 #Javascript
html读出文本文件内容
Jan 22 #Javascript
用ADODB.Stream转换
Jan 22 #Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 #Javascript
用正则xmlHttp实现的偷(转)
Jan 22 #Javascript
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 #Javascript
You might like
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
python实现电子词典
2020/04/23 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
python中函数传参详解
2016/07/03 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
python实现批处理文件
2020/07/28 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
商务会议邀请函
2014/01/09 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
员工辞职信范文大全
2015/05/12 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
python中%格式表达式实例用法
2021/06/18 Python