基于DOM与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+startX);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>