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();
评论0
最新资源