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

说是小型WebMap项目其实也算不上，因为仅仅是受朋友之托用GoogleMapAPI开发了一个简单的页面而已，而我也不是什么架构设计师，也不会什么架构设计，甚至对架构都没有一个概念，按照我的理解，架构就是思想，是对一个项目整体从头到尾从上到下的把握。至于技术实现，架构定义完了技术实现也就顺理成章了，不过个人觉得标题还是有点意思重复了，本文也可能谈的比较杂，从需求谈到思想谈到技术谈到最终的实现，加上本人写文章又很罗嗦，所以确实如标题所言杂谈。虽然现在已经完全没有了当时的兴奋，但确实非常令人高兴的，因为我周末花了一点时间，从对GoogleMapAPI和jQuery一无所知，最后用他们做成页面，算是我小试牛刀，但能在这么短的时间内见到成果，确实是让人兴奋的。需求分析没有需求就不能说是项目，没有需求也谈不上什么思想，没有需求就是空谈，所有朋友的需求很明确：因为有很多的主题地图，所以需要一个WebMap的网站来展示。虽然一句话就已经描述完了需求，但还是过于简单，我们再进一步分析现有的数据，是xml形式的，全部是点位信息，点位信息中有很多的内容，包括了名称、地址、电话、介绍和图片，而一个主题地图包括了好几个xml文件。现在需求就变得非常的明了了，就是按照主题和分类将这些丰富的点位信息展现在WemMap上。架构设计(整体思路+技术分析)需求分析完后，一个简单的页面形式就在脑海中形成了，就是左侧一个WebMap，右侧一个列表，是主题、分类和点位的列表，在左侧WebMap框中点击这些Marker(也就是Point)就出现一个气泡框(也就是InfoWindow或者说是Tip)，在气泡框中显示点位信息，本来想要把信息放在右侧列表的每个点位的下面的，但考虑到内容过多，所以未采用，而这么多的信息，放在气泡框中也是一个问题，因为气泡框就那么小，怎么可能放的下，但技术总是可以实现的。技术实现方面，首先是WebMap引擎的选择，我是选择Mapbar的JS还是GoogleMapAPI，最终我选择了GoogleMapAPI，虽然我确实没用过GoogleMapAPI，但考虑它的强大和稳定所以就选择了它了。(这里我还是小小的推荐一下我的GoogleMapAPI离线开发包，因为我周末在家是断网的，在没有网络的情况下一般是不可能做Gmap开发的，但我上星期搞了个GoogleMapAPI离线开发包，正好派上用场了，离线状态仅仅不显示地图的图片，其余都正常，放到网上的时候只要改掉调用的js就可用)。其次就是选择语言了，由于主机是PHP空间，本来准备将XML放入MYSQL，然后PHP调用生成XML，这是一个良策，但我不是会写code，所以放弃了，最终决定直接使用XML实现，虽然直接使用XML的缺点比较多，但仅仅是一个展示就没有考虑那么多。而XML的解析，又要写动态语言code，以前勉强写过一个ASP的，PHP的肯定不会，所以我必须借助其他工具了，jQuery是我的首选，因为它可以直接AJAX，我想，我要的也确实是AJAX效果。上面的大致思路确定以后就是细节了，首先右侧的list，怎么个list，首页肯定是所有主题地图名称的list，点击一个list后进入到主题地图，这个时候又是一个list，因为主题地图中有分类，再点击分类后出现pointlist。虽然说有点繁琐，但暂时没有其他更好的想法，因为内容确实这么多。点击右侧一个点位名称后，将该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是多么的优秀，我仅仅是用了几个简单的功能而已。GmapAPI：Google不愧为Google，和Mapbar的JS相比，功能不知道要强多少，将所有的地图和内容解析成对象，然后你在这些对象进行属性和事件操作，直接将复杂的开发变成了面向对象的设计。我这里用到的东西非常的少，提一下用到的东西Gmap2必不可少，Gmarker用来标注点位，openInfoWindowTabsHtml加载到点击气泡生成infoWindow并且是Tab形式的，将新的Gmarker加载到新层的时候需要clearOverlays将层上的东西全部清除。大概要说的基本上就是这些东西，其中有一点，Gmap2你要定义成一个全局的变量，而不能在一个function中，Gmap2在其余function也要用到，不然你就无法调用它了。最后上一张截图吧：总结：也没什么好总结的，架构设计中的最后一段其实也算是简单总结了，最后说一下我的想法吧，需求决定了架构，架构需要技术实现，或者说技术实现了架构，架构满足了需求，后者的说法应该更加贴切一些。本文算是谈一下我个人的感想吧，技术部分就简单的略过了，欢迎大家拍砖。