Mashup 是一种令人兴奋的交互式 Web 应用程序，它利用了从外部数据源检索到的内容来创建全新的创新服务。它们具有第二代 Web 应用程序的特点，也称为 Web 2.0。在本篇中我们通过地图 mashup 的集成应用展现 DOMINO 8 如何方便地融入到 Web 2.0 的世界里，在具体应用中人们搜集大量有关事物和行为的数据，二者都常常具有位置注释信息。所有这些包含位置数据的不同数据集均可利用地图通过令人惊奇的图形化方式呈现出来。mashup 蓬勃发展的一种主要动力就是 Google 公开了自己的 Google Maps API。这仿佛打开了一道大门，让 Web 开发人员可以在地图中包含所有类型的数据。
本例中，我们首先到Google Map 站点上申请一个 API 授权码及设置对应的信任站点名称 www.huangym.com。我们在数据库 mashupdemo.nsf 中建一个 ajaxgooglemap 表单，如图：
图 2. 建立 ajaxgooglemap 表单
可以看到主要在 HTML 首页内容的代码：
"<meta. http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"/> <title>Google Maps JavaScript. API Example</title> <script. src=\"http://ditu.google.com/maps?file=api&v=2&key= ABQIAAAAVxSMinjdZ7dEstMKHhPv7xSbs7nheOJkgjePpEsLSD4Lw3tvbRRGAvRVSkqG2_NcPTCYffaL_Bc9ng\" type=\"text/javascript\"></script>" |
其申明了 ditu.google.com 的授权号 key, 表单启动触发onload()方法。
我们在 JS Header 里面加入下列几个方法：
function load()
{
var stringURL=
'http://www.huangym.com/map/mashupdemo.nsf/vHomedata?readviewentries&outputformat=json';
XHR = new ActiveXObject("Microsoft.XMLHTTP");
oXHR.onreadystatechange = loadmap;
oXHR.open('GET', stringURL, true);
oXHR.send(null);
} |
该方法在网页打开时会被自动调用，主要的功能是向保存“homedata”的服务器发出 ajax 请求，同时设定方法“loadmap”响应请求的结果。
在代码我们可以发现，所定义的 stringURL 是获取“homedata”的 URL，其中加入了“outputformat=json”，这样 Domino 是返回结果的时候就不是返回 XML，而是返回 json 结果。
有关 ActivexObject("Microsoft.XMLHTTP") 的更多信息，请参考 Ajax 相关的文章。在这里只给出代码的概要解释：
oXHR = new ActiveXObject("Microsoft.XMLHTTP");
// 新建 ActiveObject 对象，为发起 ajax 请求做准备
oXHR.onreadystatechange = loadmap;
// 指定回调函数的名字为 loadmap，当服务器返回结果时由 loadmap 方法进行响应。
// 有关 loadmap 方法的具体实现在下面进行解释
oXHR.open('GET', stringURL, true);
// 定义 ajax 请求的目标，就是以上定义好的 stringURL
oXHR.send(null);
// 发送 ajax 请求
function loadmap() {
if (oXHR.readyState == 4) {
if (oXHR.status == 200) {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
eval("dataobj="+oXHR.responseText+";");
for (j=0;j<dataobj.viewentry.length;j++) {
locationx[j]=dataobj.viewentry[j].entrydata[0]["number"]["0"];
locationy[j]=dataobj.viewentry[j].entrydata[1]["number"]["0"] ;
distext[j]=dataobj.viewentry[j].entrydata[2]["text"]["0"];
}
map.openInfoWindow(map.getCenter(),document.createTextNode("myhome"));
switchlocation();
}
} else {
alert("server error");
}
}
} |
方法loadmap作为回调函数响应 ajax 请求的返回结果。主要功能是对返回结果进行判断，如果返回结果不是错误消息则对结果进行解析，将返回结果转换成数组，供 googlemap 对象显示时使用。最后调用switchlocation方法，开始循环显示返回结果中的不同地点。有关 switchlocation方法在下面详细解释。
在 loadmap 方法中的前三行是对返回结果进行判断。
从map = new GMap2(document.getElementById("map"));这一句开始对返回结果进行处理。
其中 GMap2 是 googlemap 定义好的类名，document.getElementById("map")是获取当前网页中的 "map" 对象，这一对象是在 Domino 表单中指定的。
在 googlemap 对象生成后，则通过addControl方法对 googlemap 对象添加控件，如地图的控制器等：
map.addControl(new GSmallMapControl()); map.addControl(new GScaleControl()); |
然后通过eval方法将 domino 返回的 json 结果转变为对象。
eval("dataobj="+oXHR.responseText+";"); |
注意，这里的 eval 方法是在 java script. 中与 json 结合的最好方法，该方法的作用是将参数中提供的字符串作为一句 javascript. 语句解释运行。这样我们就可以通过字符串操作动态生成 javascript. 代码。如以上这句就是将oXHR.responseText这个 Domino 返回的 Json 字符串转换成为名为 dataobj 的对象。
此后对 dataobj 对象进行遍历，分别将第 1 列，第 2 列 , 第 2 列转换成数组locationx，locationy，distext。
最后调用 switchlocation() 方法开始循环显示地图。
function switchlocation() {
map.setCenter(new GLatLng(Number(locationx[i]), Number(locationy[i])), 7);
map.openInfoWindow(map.getCenter(),document.createTextNode(distext[i]));
if(i>=locationx.length-1) {
i=0;
} else {
i++;
}
window.setTimeout(switchlocation,7000);
} |
方法 switchlocation 主要是通过“window.setTimeout”方法实现定时调用，每 7 秒种调用一次 switchlocation。显示不同的地点。其中变量 i 用于记录当前显示的行数，i 每循环都加 1，指向下一条记录，当 i 大于等于数组长度时，则将 i 至零，重新从第一行开始显示。显示过程中使用的方法有 map.setCenter（）用于指定地图中心的经纬度。还有map.openInfoWindow()用于在地图中心显示文本信息。
最后，如上所述，通过调用window.setTimeout(switchlocation,7000)设置定时器，在 7 秒种后重新调用方法 switchlocation。作到这里我们的 Google Map 的应用雏形基本可以完工了，通过注册的 Google 信任站点www.huangym.com访问我们的 Domino 表单 ajaxgooglemap，URL 为：http://www.huangym.com/map/mashupdemo.nsf/ajaxgooglemap?OpenForm。效果如图：
图 3. 效果
这样我们视图记录的信息就在 Google Map 轮流显示出来了。