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

说是小型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路径进行判断，如果有“?关键字”，那么直接读取主题地图配置文件，直接进入