浅析google地图前端实现原理【更新时间：2011-1-1 】

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 编辑 ]

本主题由 bound0 于 20