Maps Javascript

<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>

赞 (0)

相关推荐

  • JavaScript中利用Array和Object实现Map的方法

    本文实例讲述了JavaScript中利用Array和Object实现Map的方法.分享给大家供大家参考.具体如下: 昨天突然看到以前别人用JavaScript实现的Map感觉很不错,但是发现有个别方法有问题,顺便完善了下,添加了 remove .indexOf .values.clear等方法. /** * @author blune68 * @version 0.1, 07/27/12 * */ function Map(){ this.keys = new Array(); this.dat

  • javascript模拟map输出与去除重复项的方法

    本文实例讲述了javascript模拟map输出与去除重复项的方法.分享给大家供大家参考.具体方法如下: 1.Javascriptmap输出 function Map(){ // private var obj = {} ;// 空的对象容器,承装键值对 // put 方法 this.put = function(key , value){ obj[key] = value ;// 把键值对绑定到obj对象上 } // size 方法 获得map容器的个数 this.size = functio

  • Javascript实现的Map集合工具类完整实例

    本文实例讲述了Javascript实现的Map集合工具类.分享给大家供大家参考.具体如下: var Map = function(){ // 构造entry实体 var Entry = function(key, value){ this.key = key; this.value = value; } this.entries = new Array(); // 构造put方法在数组中放入一个Entry this.put = function(key, value){ // 数组中已存在就不放

  • JavaScript中实现map功能代码分享

    /*   * MAP对象,实现MAP功能   *   * 接口:   * size()     获取MAP元素个数   * isEmpty()    判断MAP是否为空   * clear()     删除MAP所有元素   * put(key, value)   向MAP中增加元素(key, value)    * remove(key)    删除指定KEY的元素,成功返回True,失败返回False   * get(key)    获取指定KEY的元素值VALUE,失败返回NULL   *

  • javascript 实现map集合

    前几天项目上想用map集合一样的东西,简单拿对象拼了一下子,今天闲的慌实现一下 大家不要见笑 代码 var Map = function (){ /************基础变量**************/ var hashmap = {}; var keys = []; var vals = []; var entrys = []; var size = 0; var index = {}; var Entry = function(key,value){ var entryKey = k

  • javascript实现简单的Map示例介绍

    复制代码 代码如下: /* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素(key, value) * remove(key) 删除指定KEY的元素,成功返回True,失败返回False * get(key) 获取指定KEY的元素值VALUE,失败返回NULL * element(index) 获取指定索引的元素(使用e

  • Maps Javascript

    <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:relativ

  • Google Maps API地图应用示例分享

    Google Maps API地图应用示例分享

    效果(新版Firefox中测试): 代码: <!DOCTYPE><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Google Map</title> <script type="text/javascript" src="http://

  • jquery与google map api结合使用 控件,监听器

    Google Maps JavaScript. API可以让您在自己的网页上使用Google地图.在使用API之前,您应该先申请一 个API key,申请API key请到:http://code.google.com/apis/maps/signup.html.这里假设你获取到的key是:ABQIAA. 关于jquery的获取不再此处累赘,网上有许多关于jquery的介绍. 接着我们就使用JQuery和Google Maps JavaScript. API来结合表现一下google map的有

  • vue使用Google地图的实现示例代码

    最近用Vue开发后台系统时,有些数据需要在地图上标注出来,需要用到地图功能,因为是国际项目,国内的地图不太适用,所以选用了Google地图,谷歌地图API: https://developers.google.cn/maps/documentation/javascript/tutorial . 一.必须的开发要求 1.获取密钥API Key 首先,要使用Google Maps JavaScript API,必须获取一个可用的API密钥,并且必须启用结算,具体获取步骤可百度查询,在此就不一一叙述

  • asp.net中javascript与后台c#交互

    最近做一个小项目,网页中嵌入google maps,输入经纬度坐标可以定位地图位置并加注标记,点击标记获取远端摄像头数据并在视频窗口实现播放.在实际操作过程中,由于经纬度数据和视频登录的用户名密码数据均要从后台数据库中提取,而第三版的google maps api又是在javascript中实现的,因此不可避免的需要前端脚本与后台进行交互.由于是在asp.net中实现,故问题演化成asp.net中javascript与后台c#如何进行交互. C#代码与javaScript函数的相互调用主要有四个

  • 7个Javascript地图脚本整理

    7个Javascript地图脚本整理

    1. Mapeed.AddressChooser (演示地址) Mapeed.AddressChooser 是一个JavaScript脚本, 用来创建地址表单和地图结合的特效. 当在地址表单中选择和输入地址时,实时在地图上显示地理位置,默认是使用Google Maps,你也可以整合其它地图服务. 2. GoogleMapsModal 使用jQuery插件GoogleMapsModal可以实现Google地图模拟功能,把Google地图放在你需要的任何地方. 3. jMaps jMaps 是一个

  • javascript+mapbar实现地图定位

    javascript+mapbar实现地图定位

    本文地图使用的是图地图 图吧地图在线API地址http://union.mapbar.com/apidoc/离线CHM格式 下载地址: http://union.mapbar.com/apidoc/chm/mapbarapi.rar 效果图: Mapbar 地图 API 让您可以使用 JavaScript 将 Mapbar地图嵌入您自己的网页中.API 提供了许多方法与地图交互(正如http://www.mapbar.com/localsearch/index.html 网页上显示的),以及一系

  • 说说掌握JavaScript语言的思想前提想学习js的朋友可以看看

    潜意识里也就不会用面向对象的思想去编写JavaScript代码,也很少会去深入了解prototype, closures等概念.这导致书写的代码经常很糟糕. 对于JavaScript的学习,可能最重要的还是要从思想上认识到JavaScript不是玩具语言.JavaScript的作用远不止增加点表单验证,我们可以看看GMail.看看Google Maps,如果开发者们没有对JavaScript足够尊敬,是不大可能写出如此优秀的Web应用的. JavaScript门槛很低,但门槛低并不意味着容易掌握

  • 很全面的JavaScript常用功能汇总集合

    很全面的JavaScript常用功能汇总集合

    本文主要总结了JavaScript 常用功能总结,如一些常用的额JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式.  目录: 众所周知,JavaScript是动态的面向对象的编程语言,能够实现以下效果: 丰富Web 网页功能 丰富Web界面 实现本地或远程存储. 实现分布式网络应用的前端组件,并在后台进行数据存储管理. 使用JavaScript可以实现完整的分布式Web 应用.  一.JavaScript 中的数据类型 JavaScript 提供三种元数据类型,string,numb

  • 跟我学习javascript的最新标准ES6

    虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信.潮流不是我等大众所能追赶的. 潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS的风采. 箭头操作符 如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙.它简化了函数的书写.操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs. 我们知道在JS中回调是经常的事,

随机推荐