注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

一个小型WebMap项目的架构和技术实现(GmapAPI+jQuery+XML)  

2011-11-23 11:13:06|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:Rover Tang博客园

说是小型WebMap项目其实也算不上,因为仅仅是受朋友之托用Google Map API开发了一个简单的页面而已,而我也不是什么架构设计师,也不会什么架构设计,甚至对架构都没有一个概念,按照我的理解,架构就是思想,是对一个项目 整体从头到尾从上到下的把握。至于技术实现,架构定义完了技术实现也就顺理成章了,不过个人觉得标题还是有点意思重复了,本文也可能谈的比较杂,从需求谈 到思想谈到技术谈到最终的实现,加上本人写文章又很罗嗦,所以确实如标题所言杂谈。虽然现在已经完全没有了当时的兴奋,但确实非常令人高兴的,因为我周末 花了一点时间,从对Google Map API和jQuery一无所知,最后用他们做成页面,算是我小试牛刀,但能在这么短的时间内见到成果,确实是让人兴奋的。

需求分析

没有需求就不能说是项目,没有需求也谈不上什么思想,没有需求就是空谈,所有朋友的需求很明确:因为有很多的主题地图,所以需要一个WebMap的 网站来展示。虽然一句话就已经描述完了需求,但还是过于简单,我们再进一步分析现有的数据,是xml形式的,全部是点位信息,点位信息中有很多的内容,包 括了名称、地址、电话、介绍和图片,而一个主题地图包括了好几个xml文件。现在需求就变得非常的明了了,就是按照主题和分类将这些丰富的点位信息展现在 WemMap上。

架构设计(整体思路+技术分析)

需求分析完后,一个简单的页面形式就在脑海中形成了,就是左侧一个WebMap,右侧一个列表,是主题、分类和点位的列表,在左侧WebMap框中 点击这些Marker(也就是Point)就出现一个气泡框(也就是InfoWindow或者说是Tip),在气泡框中显示点位信息,本来想要把信息放在 右侧列表的每个点位的下面的,但考虑到内容过多,所以未采用,而这么多的信息,放在气泡框中也是一个问题,因为气泡框就那么小,怎么可能放的下,但技术总 是可以实现的。

技术实现方面,首先是WebMap引擎的选择,我是选择Mapbar的JS还是Google Map API,最终我选择了Google Map API,虽然我确实没用过Google Map API,但考虑它的强大和稳定所以就选择了它了。(这里我还是小小的推荐一下我的Google Map API离线开发包,因为我周末在家是断网的,在没有网络的情况下一般是不可能做Gmap开发的,但我上星期搞了个Google Map API离线开发包,正好派上用场了,离线状态仅仅不显示地图的图片,其余都正常,放到网上的时候只要改掉调用的js就可用)。

其次就是选择语言了,由于主机是PHP空间,本来准备将XML放入MYSQL,然后PHP调用生成XML,这是一个良策,但我不是会写code,所 以放弃了,最终决定直接使用XML实现,虽然直接使用XML的缺点比较多,但仅仅是一个展示就没有考虑那么多。而XML的解析,又要写动态语言code, 以前勉强写过一个ASP的,PHP的肯定不会,所以我必须借助其他工具了,jQuery是我的首选,因为它可以直接AJAX,我想,我要的也确实是 AJAX效果。

上面的大致思路确定以后就是细节了,首先右侧的list,怎么个list,首页肯定是所有主题地图名称的list,点击一个list后进入到主题地 图,这个时候又是一个list,因为主题地图中有分类,再点击分类后出现point list。虽然说有点繁琐,但暂时没有其他更好的想法,因为内容确实这么多。点击右侧一个点位名称后,将该point居中显示,本来想直接出现气泡的,但 没有深入研究。而气泡框因为太小,不足以放下这么多的内容,或者说排版也是一个问题,而好在Google有TabInfoWindow,在气泡框分成三个 选项卡,分别是主要内容、介绍和图片。最后是文件组织,一个主题包括好几个XML文件,虽然我可以在HTML中写死,但我不想造成后期维护的麻烦,所以, 给这些XML文件来一个配置文件(配置文件也做成XML的),写清楚主题地图的名称和所用到的分类名称以及数据文件。既然主题地图的分类用配置文件来管理 了,那么我就索性将所有的主题地图信息也放到一个独立的配置文件中,算是配置文件的配置文件。首页面读取中总配置文件,得到主题地图列表,点击进入某一主 题列表,读取该主题地图的配置文件,列出分类,点击分类后读取数据XML文件,这样就可以list所有的point了。由于使用了AJAX,所以我很方便 的将所有的内容都放在了一个html页面+一个js中,就是说两个文件实现了这个功能,太简洁了,但URL是一个问题,因为只有一个首页面,而对于一个主 题地图来说肯定要有绝对路径,虽然说可以做好多个html页面,但我不采用那么傻的做法,我直接在首页面后加上“?关键字”,HTML页面对URL路径进 行判断,如果有“?关键字”,那么直接读取主题地图配置文件,直接进入主题地图了,虽然说使用“?关键字”不利于SEO,但仅仅是展示,再说AJAX本身 就不利于SEO呢。最终,我用一个HTML页面和一个JS文件实现了这些功能,并且都很简单。(如果没有制作完成,本段不可能如此顺理成章,但至少我是在 制作过程中不断的思索与改进,本段也许放在项目总结中比放在架构设计要合理一些)

技术实现

架构设计部分已经将所有内容都讲完了,技术实现也就变得枯燥而没有意义了,这里就简单的写一下算是技术的几个点吧。

Web层面:采用DIV+CSS,典型的上中下三层结构,简单的head和foot,加上中间一个主要内容,主要内容部分左侧一个地图DIV,右侧属性DIV,在这两个上面再加一个简单的DIV,因为我要放主题地图的标题或者说明。

jQuery:不用不知道一用吓一跳,真的是非常优秀的js框架,我不会js,更不会js+xml,刚开始用是非常郁闷的,甚至连什么时候开始调用 代码都没有看出来,而使用ajax的时候更是不断出错让人都想要放弃,但看了一篇入门文章又看了下实例,然后我就写出了我自己的代码,最后的时候感 叹,jQuery将虚幻的js变成了面向对象的设计。这里讲下我用到的三个内容:1,页面载入的时候如何触发JS的function,使用ready(fn),即$(document).ready或者jQuery(function($)在这个载入的过程中,我load了Gmap,判断了URL,然后调用读XML文件的function;2,jQuery.ajax([options])函数,读取XML文件,$.ajax({url: 路径,type:"GET",datatype:"xml",error:function(){出错后你怎么 办},success:function(xml){顺利读取XML后你要怎么做}}),这里当然最重要的就是success后你如何操作了,就需要对 DOM操作了;3,$(xml).find(XML节点名称).each(function(){循环获得你的节点下的内容},这里是解析XML文件了。 看几个实例并自己动手处理一下,你就明白jQuery是多么的优秀,我仅仅是用了几个简单的功能而已。

Gmap API:Google不愧为Google,和Mapbar的JS相比,功能不知道要强多少,将所有的地图和内容解析成对象,然后你在这些对象进行属性和事 件操作,直接将复杂的开发变成了面向对象的设计。我这里用到的东西非常的少,提一下用到的东西Gmap2必不可少,Gmarker用来标注点 位,openInfoWindowTabsHtml加载到点击气泡生成infoWindow并且是Tab形式的,将新的Gmarker加载到新层的时候需 要clearOverlays将层上的东西全部清除。大概要说的基本上就是这些东西,其中有一点,Gmap2你要定义成一个全局的变量,而不能在一个 function中,Gmap2在其余function也要用到,不然你就无法调用它了。

最后上一张截图吧:

GmapView

总结:

也没什么好总结的,架构设计中的最后一段其实也算是简单总结了,最后说一下我的想法吧,需求决定了架构,架构需要技术实现,或者说技术实现了架构,架构满足了需求,后者的说法应该更加贴切一些。本文算是谈一下我个人的感想吧,技术部分就简单的略过了,欢迎大家拍砖。

  评论这张
 
阅读(329)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018