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

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

1.前提

你必须对Google map API 比较了解。饭否的API 比较简单，在这个应用中，主要是是用了他开放的JSON数据。同时，你要知道什么是JSONP,用来做跨域的访问。另外由于本文的代码书写风格，你必须知道什么是闭包.

2.引入GOOGLE MAP API

通过一个script标签引入google map api

注意，key后面的字符串是根据域名在google 的网站上获取的，如果你要在自己的网站上使用，你需要用域名去获取一下API 密钥。

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，插入到对应的框中。

在页面上你可以看到，最开始引入了一个

就是用来做地址解析的。也就是先把具体地址和其对应的经纬度存在一个文件里。用的时候根据具体地址获取经纬度就可以了。

我写过一个专门获取经纬度的工具：经纬度查询工具

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