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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
jquery提示效果实例分析
Nov 25 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
自适应高度框架 ----属个人收藏内容
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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
Three.js学习之网格
2016/08/10 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
vue 授权获取微信openId操作
2020/11/13 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python元组操作实例解析
2014/09/23 Python
python轻松实现代码编码格式转换
2015/03/26 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python如何对齐字符串
2020/07/30 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
法学专业个人求职信
2013/09/26 职场文书
酒店管理自荐信
2013/10/23 职场文书
室内拓展活动方案
2014/02/13 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
2016党校培训心得体会
2016/01/07 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python