link http://bbs.blueidea.com/thread-3008274-1-1.html >>点击查看 地图路径查找 74楼更新 【2011-1-1】 如标题所述,这篇帖子是由上篇帖子 【JavaScript有问必答帖】——提交你遇到的JS问题,我们一一解答 ——派生出来的。 可以点击这里 [ http://bbs.blueidea.com/thread-3008056-1-1.html ] 查看第8楼 版主老饕 的留言: “这样推广成本太高了…… 我也来问个小问题吧:O(∩_∩)O Google卫星地图是怎么做的?(只限前台部分,要求详细解答)” 对版主老饕的提出的这个问题,我们也非常有兴趣,所以当时就回复了我们的想法: “老饕的问题我们也非常感兴趣,不过这个问题要广度有广度,要深度有深度, 不如我们新开个帖子专门来聊这个话题,帖子名称就叫做:“应版主要求,浅析google地图前端实现原理” 由我们开篇拉个google地图实现框架,每天更新一点内容,欢迎大家一起跟帖讨论哈~” 于是就有了这篇帖子~^_^ 在此很感谢 老饕 对我们这样一个新兴的小培训机构的体谅——“这样推广成本太高了”, 呵呵,正因为我们暂时没有财力推广自己,所以才有了上一篇帖子,打算凭借自身的技术为大家解决更多问题,从而让大家了解我们。 如果想学习的朋友感觉我们技术还算靠谱、愿意跟着我们一块学习,我们就非常欣慰,才能勉强生存下来~^_^ 如版主所言,“这样推广成本太高了”——在我们看来,这样推广还算好,我们顶多就是辛苦一些,多解答大家的问题就好 ^_^ 再次感谢版主对我们的体谅~ 下面开始回复版主的提议,做个google地图吧~ 这个东西大家都知道,是个大工程,不过依据版主所说的:“只限前台部分,要求详细解答~” 呵呵,那我们就把这个大工程,一天发一点,有时间我们就写,不断更新这个帖子,直到最后做出个差不多的样子~ 欢迎有兴趣的朋友全程参与讨论,共同完善这个帖子,让更多希望了解的朋友在这里获得相应的知识,也算是尽我们微薄的力量吧~ 既然咱们要来做 google 地图这个东西,那我们还得先扯扯 google 地图的架构,虽然版主只提出了前端部分的问题,可我们不能孤立的只考虑前端吧~ Google 地图的负载就不用多说了,必然相当大,所以我们优先考虑扩展性和负载均衡能力,这样才不会出现单点问题。 Google 地图后台如何实现负载均衡呢?考虑到 Google 常拿 MapReduce 和 hyperTable 出来得瑟,所以有理由相信,他在 Map 里大量用到了这两种技术。 现在我们来考虑一下这两种常用技术的特点,及适用的场合。 MapReduce,这是Google压箱底的一项基础技术,原来动手实现过一个MapReduce框架,所以还是比较了解的,MapReduce的特点在于负载均衡能力极强、程序改动小以及近乎完美的容错能力,唯一的缺点就在于其调度时间很长,换句话说,它的响应速度不行。 hyperTable,这是 Google 在 NoSql 领域的一项技术,主要被用于数据缓存,而非查询,hyperTable 归根到底只不过是一种分布式的 Key-Value 查询服务,所以并不能满足比较复杂的查询需求,但它的特点也很明显,那就是响应速度很快,扩展性也相当的优秀。 所以,要想同时获得高可扩展性和具有复杂查询能力的架构,我们就要结合使用这两个东西,下面简单总结一下 名称 响应速度 吞吐能力 复杂查询 MapReduce × √ √ HyperTable √ × × 所以,我们得出一个结论: HyperTable 更适合作为缓存服务,简单的用来提取已有结果; 而MapReduce更适合用来作为计算服务,用来提取执行查询。 如果由我来设计Google地图的架构,那我会把服务器分成四类: 1. 查询类 用来接受用户提交的查询信息,比如“立水桥的位置,天通苑附近哪儿有妙味课堂 ^_^”,这类查询问题。这类服务器讲究的是吞吐量。 2. 资源类 简单来说就是放东西的,地图中用到大量的图片等资源,这类服务器是数量最多的。 3. 调度类 用来调度其他所有服务器和资源的控制器,是负载均衡的核心部分。 4. 缓存类 这类服务器主要用来缓存查询结果,热门资源的集中访问问题的解决就靠这个部分了,可以极大的降低核心计算集群的访问负荷。 简单画了个图: 如果要把整个系统都实现出来,功能并不是特别复杂,只是时间和精力不允许(当然有大财团愿意赞助除外哈~),所以咱们要做的前端部分,主要是和查询类服务器交互,其他几种,就直接忽略了,重点来关注这部分程序。 ------------------------与地图不相干的分界线----------------------- 今天由于比较忙,暂时发这些,晚些时候尽力更新HTML的布局部分~ ------------------------2010-12-17 【最新】----------------------- 每天更新一点,今天继续~ 既然是要模拟 Google 卫星地图,那么就从布局开始。 Google 地图是由一小块一小块的n张图片拼接而成,因为卫星拍下来的照片就是一小块一张,分割以后,放到网页,利于加载。 所以我们选了一块Google卫星地图,印屏幕到 PS 里,将它切成了宽和高各 200px 的小图片~ 切图片的方法比较笨拙(不是专业的PS出身哈): 画了n块宽高固定的格子,对准格子的大小从大图里一张张把小图片全抠出来,然后按照 X 和 Y 轴将它们命名编号,保存待用~ 具体过程是这样子: HTML方面:用一个 DIV 存放所有切好的小图片,小图片暂时全用左浮动排列,以便于制作页面时用来调整布局,将来这些图片的位置都会由JS来动态生成。 存放小图片的 DIV 设置了一个绝对定位,在它的外层,设置了一个相对定位的 DIV,这个外层 DIV 的作用就只是限制里面图片的可视区域。并且它的宽高都是根据浏览器的宽高而变化。 当用户在地图上拖拽时,会动态生成一个 DIV,它会遮住存放图片的 DIV,设置遮盖层的透明度为0,这样用户就看不见遮盖层了,但实际上我们拖拽的,就是遮盖层,存放图片的 DIV 位置其实是随着它走动的。 如果拖拽的位置超出了当前图片的数量,就发生加载…… JS部分: 目前实现的,仅仅只是最简单的鼠标可以拖拽地图移动~ 为了达到效果和通用性的平衡,用到了 事件绑定、全局捕获、运动框架 等几个小技术,就只是个小小的拖拽而已,没有什么值得说的,当然,如果大家感兴趣,咱们也可以扯扯这方面的东西。 >>点击这里,预览效果 友情提示:点击进入页面以后,里面的链接全是广告,请朋友们慎重点击 ^_^ ------------------------未完待续----------------------- 我们每天空闲的时候,就做一点点,不间断往上发,所以速度不会那么快,还请关注的朋友们多多体谅~今天先发到这儿。 接下来要做的几个功能是:[i]地图缩放、地点标记和绘制路径…… 感谢大家的支持,欢迎多提意见,多拍砖 ^_^ [[i] 本帖最后由 miaovjavascript 于 2011-1-1 21:55 编辑 ] |
浅析google地图前端实现原理【更新时间:2011-1-1 】
最新推荐文章于 2024-08-16 17:41:49 发布