[转帖]类似GoogleMap地图网站的简单实现（1）

<P>实现分析</P>
<P>地图分割、拼凑<BR>(图片来自都市圈地图)<BR><IMG src="http://www.cnblogs.com/images/cnblogs_com/ghtyan/split.jpg" border=0><BR>地图网站主要展现的就是地图图片，当查看或拖动地图的时候，看到的是一张完整的当前视窗地图图片，但实际上是一张张小图片拼凑而成。地图是拼凑而成那就涉及到图片是如何分割，分割的方法很多，我说一下其中一种:地图本来就是一张很大的图片，把大图当作放在二维坐标系中（单位像素），大图左上角为圆点，沿着坐标线一小块一小块的切下来，这里以256像素X256像素的正方形为一小块,切下来之后按照坐标点除以小图边长命名（比如某小块是从坐标（256，512）处开始切图，则文件名为1,2.jpg），这样就可以知道小图的位置了。网站上看到多种倍数的地图，也就是把大图缩写相应的倍数再按同样的规格切小图；不同类型的图片（比如航拍图，2D图）也就同样的道理了，至于怎么存放就按自己的思路存放，怎么存就怎么取出来。</P>
<P><BR>Web中地图展现<BR><IMG src="http://www.cnblogs.com/images/cnblogs_com/ghtyan/mapLays.jpg" border=0><BR>网页中展现地图是通过Div层实现，一个层是作为窗口，层的大小就是看到的地图大小（简称窗口层）；一个层是用来拖动时随鼠标移动的层（简称移动层），前面说道大图是当作放在二维坐标系中，那么这个层就是充当这个坐标系，你需要显示哪张小图，就把小图拼在它切出来的坐标上，要知道显示哪张小图这就得通过当前定位的坐标（center）（定位的坐标就作为窗口层的中心位置）和窗口层的宽度（width）以及高度（height）计算出要拼上去的小图。<BR>计算推理：<BR>横向坐标范围：center.x-width/2  至 center.x+width/2<BR>纵向坐标范围：center.y-height/2  至 center.y+height/2</P>
<P>小图是一块256像素的正方形,因此<BR>小图横向下标范围：Math.floor((center.x-width/2)/256)  至 Math.floor((center.x+width/2)/256)<BR>小图纵向下标范围：Math.floor((center.y-height/2)/256)  至 Math.floor((center.y+height/2)256)</P>
<P>通过以上下标范围就可以找到相应的图片，把图片显示在相应的坐标位置上，小图是拼凑得了，还要把镜头(窗口层)移动到center这个位置，窗口层是固定的不能移动，移动是相对的那就移动一下移动层吧<BR>移动层的Left=width/2-center.x<BR>移动层的top=height/2-center.y</P>
<P>这样简单的地图显示就可以实现了，看一下还有一个遮盖层，其实这层是透明的，不影响地图的显示，其作用是避免直接操作到地图图片，以及避免IE下出现图片工具条<BR><IMG src="http://www.cnblogs.com/images/cnblogs_com/ghtyan/imagetool.jpg" border=0><BR></P>
<P><BR>还是来看看代码和效果吧<BR></P>
<P>为了好测试，把代码都写在页面上了。 <a href="http://www.cnblogs.com/Files/ghtyan/map0905.htm" target="_blank" >查看演示</A>   （兼容IE和Firefox ）<BR> <BR></P>

<P>详细地址见</P>
<P><a href="http://www.cnblogs.com/ghtyan/archive/2007/09/05/882834.html" target="_blank" >http://www.cnblogs.com/ghtyan/archive/2007/09/05/882834.html</A></P>

<P>牛人，好，支持！</P>