识比特

本quarter Geodetic Science 634 – Digital Mapping Systems最后一个实验：Google’s Solution of WebGIS，照着指导写了点东西。总结一下吧。

首先是用Google SketchUp建了几个简单的建筑模型，保存为kmz文件后可以直接在google earth中查看。然后熟悉了一下google的（确切地说已经是OpenGIS的标准了，不过这里还用到了一些google的专有扩展）kml文件格式，用flyto标签创建一个展示3D建筑的动画。除了这些算是单机的之外，剩下的就全部都是web实现了——又是天天在写的html+javascript。

一共写了这么几个文件：

• Google earth API with own 3D model

自己用SketchUp建了个模，上传到服务器，利用google earth api将其显示在网页中内嵌的earth frame中。

• Google maps API with routes

在google earth下生成了两个路线的kml文件，上传到服务器，利用google maps api显示两条路线。为两条路线显示增加开关，另加一开关切换使用普通google maps网页api显示或调用google earth插件3D显示。

• Geocoding with google maps api and show in earth

利用google maps api提供的geocoder对地址进行定位，结果用google earth显示。另外控制google earth，显示边界层和道路层。

• Smooth animation with google earth api

利用google earth api，打开边界层、道路层和3D建筑层，向正北方向飞行的动画效果。动画利用googleearthplugin的frameend事件产生。Google官方例子。

• Geocoding with google map api and animation in earth

上面两个功能的综合，外加控制飞行方向。另外用到了GEView的viewchangeend事件控制动画产生。

• Load models and tour by kml

在上面基础上自己研究出来的功能，用google earth api实现了最初提到的单机在google earth中显示建筑模型并动画展示的功能。建筑通过kml加载dae，动画直接加载kml动画。

另外写了一个索引文件http://www.seebit.org/glab/（英文）

最近Gmail升级频繁，又增加了很多非常cool的功能。今天用Firefox登录居然发现那帮geek们把AIM的聊天功能也加入到在线版的Gtalk中了。再加上前些天的群聊、表情图片，Gmail中单单一个聊天组件都快成miranda这样的专业IM软件了。

再看看整个Gmail，邮件内容预读取、更人性化的操作提示，对附件中各种文档在线查看、编辑的支持……基于Ajax的Gmail在很多方面甚至超过了我用的DreamMail的功能。不得不承认，Google把Ajax玩到了一种极致。

但不得不说的是，在使用完Gmail关闭我的Firefox的时，我已经遇到了多次Firefox崩溃的现象。这使我不怀疑难道Ajax的极限到了？

Ajax的核心JavaScript毕竟只是一门基于浏览器的解释型语言，执行效率上本来就相当不怎么样。而浏览器经过这十几年的发展也已经变成了一个超级复杂的软件系统，本身就有很多bug。在bug多上跑效率低……

不过看来众多软件厂商早已注意到这个问题Flash、SliverLight、JavaFX都在争抢着下一代RIA开发者的眼球。

解决问题总是好的，只是希望新的方案能解决浏览器之间的兼容性问题，不要让我们再头痛于JavaScript那样的浏览器hack之中。

1. 看不见的之流量流量统计（本篇）
2. 看不见的之“希望泉录入系统”
3. 看的见的之读者评论系统
4. 看的见的之侧边浮动导航

学着Google的吴军，写个系列文章，分享一下自己的积累。我这里写个What’s behind Hope Spring，将自己在做《希望泉杂志》技术一年多来积累的东西整理一下。也希望对技术部其他同学有所帮助。

这一篇主要写的是《希望泉》页面中用到的流量统计代码。

在06年8月之后的《希望泉》页面代码里你总能找到类似以下的一段：

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-1351459-1";
urchinTracker();
</script>

这段代码使用的是Google Analytics的统计服务。只要申请一个Google Analytics的帐户，在页面上放置这样一段代码，就可以实现相当完善的流量统计服务。每天的访问量多少、读者都是来自哪个地区的、他们都看了哪些页面、读者是从哪个网站找到《希望泉》的……在Google提供的控制台上，这一切都一目了然。

另外，如果你对比一下各期《希望泉》这段代码出现的位置，就会发现最近几期《希望泉》中这段代码是放在页面最下端的，而以前很长时间这段代码是被放在代码头部head标签之中的。这主要是为了改善读者体验：

对外部javascript的引用如果出现在head之中，浏览器（尤其是IE）会试图在渲染页面之前加载这个外部文件，而Google Analytics的服务器在国外，加载速度比较慢，于是降低页面的显示速度；而把它放在接近</body> 的地方，页面在加载这个外部文件之前就已经渲染地差不多了，即使没有执行这段代码，他们也已经可以阅读其中的文字了。

今天上网搜索jseclipse的文章时无意发现了一个好玩的东东：Snap Shots。作用嘛，把鼠标指向下面的链接就知道了：

http://www.snap.com/

怎样，帅吧*_^，其实只需要在页面中加入那么一行javascript代码就OK了：

<script type="text/javascript" src="http://shots.snap.com/snap_shots.js?ap=1&amp;key=208846eadce902c91c9ef7a3843f1b00&amp;sb=1&amp;th=ice&amp;cl=0&amp;si=0&amp;po=0&amp;df=0&amp;oi=0&amp;link_icon=on&amp;shots_trigger=both&amp;lang=en-us&amp;domain=www.seebit.org&amp;as=1"></script>

想要的话自己去申请一个吧。

在做Keyword.php这个页面时，需要动态向表格中添加、删除行。

在不断败、修改、再失败、再修改后，终于找到了个能用的方法：

添加行：

var _tr=T.insertRow(0);

_tr.id=”row1″;

var _td=_tr.insertCell(0);

var _tn=document.createTextNode(“第一列”);

_td.appendChild(_tn);

var _td=_tr.insertCell(1);

var _tn=document.createTextNode(“第二列”);

_td.appendChild(_tn);

《Ajax基础教程》里的向tbody中appendChild()的方法在我的IE中没有成功（还是不显示表格），不过我这种方法至少从表面上看应该会引起浏览器对表格的多次重构，效率应该不是很高。不知道还有什么好的跨浏览器的方法。

删除行：

在表格的每一行都为tr设置了id，通过该id删除该行

_row=document.getElementById(“row1″);

T.firstChild.removeChild(_row);

其中

T.firstChild是用来获得tbody这个对象的，tr为tbody的直接子对象，而不是table！

注意：

在html生成的静态表格中要采用以下的样式：

<table id=”myTable” width=”400″ border=”1″ bordercolor=”#000000″><tbody>

……

</tbody>

</table>

关键是那个<tbody>一定要紧跟在<table>之后，否则FF会认为tbody前有一个TextNode，T.firstChild就不是指向tbody了。

寒假里学PHP，照书上做了个简单的CMS：SuperFastOnlineNews，也没有书附的光盘，靠着书上几幅截图和部分代码，终于大概把它做了出来。但最后剩一个为文章添加Keywords的页面，突发奇想：拿它练练Ajax吧。
结果一练就练到了今天晚上……

太期待有个JavaScript的IDE了……

PHP发送中文、Ajax接收
只需在php顶部加入一句：

header('Content-type: text/html;charset=GB2312');

xmlHttp会正确解析其中的中文。

Ajax发送中文、PHP接收
这个比较复杂：
Ajax中先用encodeURIComponent对要提交的中文进行编码
PHP中：

$GB2312string=iconv( 'UTF-8', 'gb2312//IGNORE' , $RequestAjaxString);

PHP写入MySQL数据库
建立conn时，query一下set names “gb2312”

前一阵子从网上看到了一个非常好的制作CSS菜单的工具：Infinite Menus。完全可视化界面，制作出来的菜单那叫精美……
下载地址：http://www.opencube.com/download.asp

但软件是收费的，而且说得也不是很明白：制作和在本地调试期间是看不到收费的迹象的，但一旦发布到网上，每次撕开网页都会弹出个对话框“Infinite Menus must be purchased for Internet use.”相当令人郁闷。

仔细研究了一下它生成的代码，发现虽然做了隐藏，但要求注册的代码也做的太不够健壮了，只要把它生成的那个ocscript.js最后的这一段代码删除：

ims1a="Add your unlock code here.";;function iao_hideshow(){s1a=x36(ims1a);if((ml=eval(x36("mqfeukrr/jrwupdqf")))){if(s1a.length>2){for(i in(sa=s1a.split(":")))if((s1a=='hidden')||(ml.toLowerCase().indexOf(sa[i])+1))return;} eval(x36("bnhvu*%Mohlrjvh$Ngqyt\"pytv#ff\"syseketgg$gqu$Jpwisphx!wvi/$,"));}};function x36(st){return st.replace(/./g,x37);};function x37(a,b){return String.fromCharCode(a.charCodeAt(0)-1-(b-(parseInt(b/4)*4)));}

OK，再也不会有提示了！
ps：其实分析这段代码是件相当有意思的工作，你也可以试一试！（提示：eval函数可以执行字符串变量中的代码）

刚刚从Google上搜到的一个用来显式固定菜单的代码。用来在页面上显示固定位置的菜单的。上次自己做《希望泉》的时候只知道position的fixed不能被IE6支持，只好用条件注释：

<!--[if lte IE 6]>
<script language="javascript">
document.getElementById("menu").style.cssText="width:80px; z-index:999999; position:absolute; top: 100px; left: 20px;";
</script>
<![endif]-->

将IE6下的属性换成absolute。没想到这个代码这么简单就实现了固定菜单对浏览器的“通吃”，学习…

<html>
<head>
<title>永远固定不随页面滚动的菜单 www.div-css.com</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
</head>
<body>

<div style= "position:fixed !important; top/**/:0px;
position:absolute; top:expression(offsetParent.scrollTop);
width:100%;">
<div  style= "width:100%; overflow:hidden; background:red; font-size:13px; ">
menu位置：<a xhref="http://www.div-css.com" mce_href="http://www.div-css.com"> www.div-css.com dic+css技术教程资料下载</a>
</div>
</div>

<div style="margin-top:30px;">
IE Firefox下测试通过
1<br />2<br />3<br />4<br />5<br />6<br /><br />
1<br />2<br />3<br />4<br />5<br />6<br /><br />
1<br />2<br />3<br />4<br />5<br />6<br /><br />
1<br />2<br />3<br />4<br />5<br />6<br /><br />
1<br />2<br />3<br />4<br />5<br />6<br /><br />
1<br />2<br />3<br />4<br />5<br />6<br /><br />
</div>
</body>
</html>