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 相关文章推荐
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
vue 组件基础知识总结
Jan 26 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 xml文件操作代码(一)
2009/03/20 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
ie 调试javascript的工具
2009/04/29 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python实现下载文件的三种方法
2017/02/09 Python
浅析Git版本控制器使用
2017/12/10 Python
基于Django用户认证系统详解
2018/02/21 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
Python饼状图的绘制实例
2019/01/15 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
管理心得体会
2013/12/28 职场文书
亲子读书活动方案
2014/02/22 职场文书
企业委托书范本
2014/09/13 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
信息技术课教学反思
2016/02/23 职场文书
五年级语文教学反思
2016/03/03 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
八年级作文之感恩
2019/11/22 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Nginx 常用配置
2022/05/15 Servers