Google Map模拟

原创 2006年05月17日 11:17:00

fram.html:

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language=javascript>
function forbiddenclick() { //函数功能,如果当前点击右键,返回false
if (event.button==2)
 {
 return false;
 }
}
document.onmousedown=forbiddenclick;//禁止右键
document.onselectstart=returnFalse; //禁止文档选择
function returnFalse() { return false; }
document.oncontextmenu=new Function("event.returnValue=false;");//禁止右键动作
</script>
</head>

<body leftmargin="0" topmargin="0">
<iframe id=main border=0 frameborder="0" src="index.htm" width="490" height="400" scrolling="no" name="aa">
</iframe>
</body>

</html>

index.htm:

<html>
<title></title>
<head>
<SCRIPT language=JavaScript1.2>
<!--
document.onselectstart=returnFalse;
function returnFalse() { return false; }
document.oncontextmenu=new Function("event.returnValue=false;");

var ie=document.all
var ns6=document.getElementById&&!document.all


///////控制层的拖动
var xN,yN;  //设置了层的规格
var picWidth=2600; //整个大图的宽度2592
var picHeight = 2000; //整个大图的高度1944
var viewWidth = 490;
var viewHeight = 400; //定义了浏览框的尺寸
var sX,sY,sZ  //这里是一个mission的全局控制量,浏览视窗相对大图所在的位置,以左上为基准
var fX,fY //用来记录载入图片的索引
var dragapproved=false
var z,x,y
var temp1,temp2


function definePosition(diva,divX,divY){  //根据层被拖动后的位置,调整层的定位,以及决定是否需要重载图片
sX -= parseInt(divX,10)-temp1;
sY -= parseInt(divY,10)-temp2;
var re = true;
 if(divX>0)
 {
  diva.style.left = divX - (Math.floor(divX/200)+1)*200;
  fX -= Math.floor(divX/200)+1;
  re = false;
 }
 else if(divX<viewWidth-200*xN)
 {
  
  diva.style.left = divX + (Math.floor((viewWidth-200*xN-divX)/200)+1)*200;
  fX += Math.floor((viewWidth-200*xN-divX)/200)+1;
  re = false;
 }


 if(divY>0)
 {
  diva.style.top = divY - (Math.floor(divY/200)+1)*200;
  fY -= Math.floor(divY/200)+1;
    re = false;
 }
 else if(divY<viewHeight-200*yN)
 {
  diva.style.top = divY + (Math.floor((viewHeight-200*yN-divY)/200)+1)*200;
  fY += Math.floor((viewHeight-200*yN-divY)/200)+1;
  re = false;

 }
 return re;
}

function drags(eventObject){
 if(eventObject.button==1&&eventObject.srcElement.tagName.toString()=="IMG"){
 temp1=parseInt(moveDiva.style.left,10);
 temp2=parseInt(moveDiva.style.top,10);
 x=parseInt(eventObject.clientX,10);
 y=parseInt(eventObject.clientY,10);
 dragapproved = true;
 moveDiva.setCapture();
 }
 return false;
}

function divaMouseup(eventObject){
 if(eventObject.button==1&&dragapproved)
 {
 dragapproved=false;
 moveDiva.releaseCapture();
 checkOutYN();
 if(!definePosition(moveDiva,parseInt(moveDiva.style.left,10),parseInt(moveDiva.style.top,10)))reloadPic(fX,fY);
 } 
 
 return;
 }

function divaMove(eventObject){
 if(dragapproved &&eventObject.button==1)
  {
   moveDiva.style.left=temp1+parseInt(eventObject.clientX,10)-x;
   moveDiva.style.top=temp2+parseInt(eventObject.clientY,10)-y;
  }
 return;
}

function checkOutYN(){
var changedX = sX-parseInt(moveDiva.style.left,10)+temp1;
var changedY = sY-parseInt(moveDiva.style.top,10)+temp2;

if(changedX<=0)
{
 moveDiva.style.left = temp1+sX;
}
else if(changedX>=picWidth-viewWidth)
{
 moveDiva.style.left =temp1-(picWidth-viewWidth-sX);
}
if(changedY<=0)
{
 moveDiva.style.top = temp2+sY;
}
else if(changedY>=picHeight-viewHeight)
{
 moveDiva.style.top=temp2-(picHeight-viewHeight-sY);
}
return true;
}
//-->

function reloadPic(formatX,formatY){ //当确定需要重载图片后,进行载入图片

for(i=1;i<=yN;i++)
 {
  for(j=1;j<=xN;j++)
  {
   document.getElementById("pic"+i+"_"+j).src = "images/"+(fY+i).toString()+"_"+(fX+j).toString()+".jpg";
  }
 }
}


function loadPic(sessionX,sessionY,sessionZ){ //此函数用于根据当前层的位置,载入相应的图片divX、divY表示层的当前位置
           //divZ表示当前所处的放大倍数,xNum和yNum则显示了当前层需要载入图片的规格
 var startX = Math.floor(sessionX/200);
 fX = startX;
 var startY = Math.floor(sessionY/200);
 fY = startY;
 for(i=1;i<=yN;i++)
 {
  for(j=1;j<=xN;j++)
  {
   document.getElementById("pic"+i+"_"+j).src = "images/"+(startY+i).toString()+"_"+(startX+j).toString()+".jpg";
  }
 }          

}

function initialization(sessionX,sessionY,xNum,yNum){  //初始化元素,xNum和yNum指定了载入图片的数量
var iniStr = "<table border=/"0/" width=/"100%/" id=/"table1/" cellspacing=/"0/" cellpadding=/"0/" onselect=/"return false;/">";
for(i=1;i<=yNum;i++)
 {
  iniStr += "<tr>";
  for(j=1;j<=xNum;j++)
   {
    iniStr += "<td width=/"200/" height=/"200/">";
    iniStr += "<img id=/"pic"+i+"_"+j+"/" width=/"100%/" height=/"100%/" onerror=/"this.src='images/spacer.gif'/">";
    iniStr += "</td>";
   }
  iniStr += "</tr>";
 }
iniStr += "</table>";

document.getElementById("moveDiva").style.width = 200*xNum;
document.getElementById("moveDiva").style.height = 200*yNum;
document.getElementById("moveDiva").innerHTML = iniStr;
xN = xNum;
yN = yNum;
sX = sessionX;
sY = sessionY;
moveDiva.style.left = -sX%200;
moveDiva.style.top = -sY%200;
loadPic(sessionX,sessionY,1);
}
//-->

</SCRIPT>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#FFFFCC">
 <div id="moveDiva" onmousedown="drags(event)" onmousemove="divaMove(event)" onmouseup="divaMouseup(event)" style=" LEFT:0px; POSITION:absolute; TOP:0px;background:#cc0000; Z-INDEX:1">
loading HTML...
</div>
</body>
</html>
<script language="javascript">
initialization(1640,850,4,4);
</script>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

google map 纠偏

android google map apiKey 相关操作

android 在开发google map 项目的时候,首先需要一个android.keystore文件,该文件在    如果是win 7 则:C:\Users\Administrator\.and...

google map

  • 2012-11-25 15:47
  • 1.08MB
  • 下载

google map gis

  • 2013-11-19 16:40
  • 32KB
  • 下载

android google map

Android SDK Tools Android Dev Tools Guides Tutorials Design Tools GFriends ...

mfc中嵌入google map

  • 2015-10-27 14:00
  • 14.39MB
  • 下载

google map api v2 版本

  • 2014-03-30 07:53
  • 3.49MB
  • 下载

android google map入门 二

地图对象与地图标记向android中添加地图对象的步骤: (此步骤只需执行一次。) 按照项目配置指南中的步骤获取 API,获得密钥,然后 将所需属性添加到您的 Android 清单文件中。 向将处理...

google map的測試HTML檔案

  • 2015-02-25 23:35
  • 20KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)