MashupGoogle Map API与饭否API的整合应用

http://www.cssrain.cn/article.asp?id=1370

Mashup--Google Map API与饭否API的整合应用

这是一个通过JS 整合两个API 的混搭小应用。

先预览这个应用：http://www.playgoogle.com/demo/fanfou/default.htm

1.前提

(1)， 什么是Mashup?？
http://baike.baidu.com/view/241257.htm
(2)你必须对Google map API 比较了解。饭否的API 比较简单，在这个应用中，主要是是用了他开放的JSON数据。同时，你要知道什么是JSONP ,用来做跨域的访问。另外由于本文的代码书写风格，你必须知道什么是闭包.

2.引入GOOGLE MAP API

通过一个script标签引入google map api
< script type="text/javascript"
src="http://ditu.google.com/maps?file=api&v=2& key=ABQIAAAAOYVY-acpvTnhAhwAg94W7RQULNflpX8UqGwTaVYnmUlH28s8DBSBksAirhcPKVRiRFkFe4FWR65TaA">
< /script>
注意，key后面的字符串是根据域名在google 的网站上获取的，如果你要在自己的网站上使用，你需要用域名去获取一下API 密钥。
密钥地址：http://code.google.com/intl/zh-CN/apis/maps/signup.html

3.初始化MAP

通常，在body的onload事件里面去初始化地图，我是在KARRY.init函数里面初始化的。把地图的中心默认设置为中国洛阳。
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.68491,112.47605), 6);
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GMapTypeControl());

4.搜索关键词

我在 KARRY.JS 的顶部设置了一个默认的关键词 var keyword = "红酒"; 在初始化地图之后，立即去搜索饭否上包含该关键词的内容：
在scratchJson（）这个方法中（由于采用了闭包，这个方法是私有方法。）这个方法在立即执行的同时会设置一个定时器，每隔600秒会重新执行一次。也就是10分钟后会重新搜索饭否的数据，看是否有更新。
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://api.fanfou.com/search/public_timeline.json?q='+keyword +'&' + Math.random() + '&count=30&callback=KARRY.callBack';
document.getElementsByTagName('head')[0].appendChild(s);
这里用到了JSONP,其实就是在页面上载入了一段饭否的js,同时有一个回调函数，callback=KARRY.callBack，也就是当数据载入完成之后，会立即执行KARRY.callBack函数。很显然，这个回调函数主要的目的是对载入的数据进行解析。

5.解析数据

要解析数据，首先要知道别人给的数据是什么格式：

[{"created_at":"Mon Jun 08 11:44:51 +0000 2009",
"id":"P5kJHLcHDbQ",
"text":"内容",
"source":"\u7f51\u9875",
"truncated":false,
"in_reply_to_status_id":"",
"in_reply_to_user_id":"",
"favorited":false,
"in_reply_to_screen_name":"",
"user":
{"id":"karryzhang",
"name":"karryzhang",
"screen_name":"karryzhang",
"location":null,
"location_en":null,
"description":"",
"profile_image_url":"http:\/\/avatar.fanfou.com\/s0\/00\/e0\/g6.jpg?1244277109",
"url":"http:\/\/fanfou.com\/karryzhang",
"protected":false,
"followers_count":1
},
"photo_url":""
}]

饭否搜索返回的JSON 就是上面那个数组的形式，进行重复。
既然是数组，那就循环去读数据，然后逐条解析，获取需要的内容就行了。
由于数据要在地图上一条一条的显示，而不是一次都显示出来，
这里就需要另外一个定时器，每隔10秒往下读一条数据了。

var p = 0;
if(innerInterval!=null){
clearInterval(innerInterval);
}
innerInterval = setInterval(function(){
if (/海外/.exec(j[p].user.location)){
map.setZoom(3);
} else {
map.setZoom(curlevel);
}
//弹出框
map.openInfoWindowHtml(getPoint(j[p].user.location), parseDataToHTML(j[p]));
counter.innerHTML = j.length - p;
p++;
if(p==j.length){
clearInterval(innerInterval);
return;
}},10000);

注意里面调用的两个私有方法：getPoint(j[p].user.location) parseDataToHTML(j[p])，
getPoint前面一个是通过地址名获取对应的经纬度。parseDataToHTML是把内容拼装成DOM，
插入到对应的框中。 在页面上你可以看到，最开始引入了一个
< script type="text/javascript" src="karry/geocode.js">< /script>
就是用来做地址解析的。也就是先把具体地址和其对应的经纬度存在一个文件里。
用的时候根据具体地址获取经纬度就可以了。
我写过一个专门获取经纬度的工具：经纬度查询工具
地址如下：http://www.playgoogle.com/googlemap/tool1.html

6.获取饭否上的热门关键词

在初始化地图，搜索了默认关键词的同时，就通过getHotWords()方法开始获取热门关键词了.
饭否热词也是一个JSON格式的数据，路径：http://api.fanfou.com/trends.json同样的，还是通过JSONP，
把它通过< script>标签载入到页面中来，载入完成后通过回调函数来格式化数据，拼装成DOM格式，让其出现在右侧。

7.点击热词或者点击搜索按钮的处理

在右侧的热门关键词和搜索按钮上都绑定了一个事件，KARRY.setKeyWord（），功能其实很简单，重新设置关键词，并清除当前的定时器，重新执行第四步，搜索关键词。

if(keyword==str){
alert("当前显示的是"+keyword+"相关的内容");
return;
}
keyword = str;
if(!interval){
clearInterval(interval);
}
if(!innerInterval){
clearInterval(innerInterval);
}
scratchJson();
interval = setInterval(scratchJson, 600000);
alert("正在从饭否上获取有关"+keyword+"的信息，请稍后");

8.总结

这个应用的原理很简单。我通过获取饭否的API中的热词，在用户点击热词之后，会把热词作为关键词去载入饭否API中的公开搜索，搜索出包含该关键词的内容。再解析内容，根据用户的地址，在google map找到对应的经纬度并把内容展示出来，这里使用了setInterval 来定时获取。


查看这个应用的地址：http://www.playgoogle.com/demo/fanfou/default.htm