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

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

1.前提

你必须对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&amp;v=2&amp;key=ABQIAAAAOYVY-acpvTnhAhwAg94W7RQULNflpX8UqGwTaVYnmUlH28s8DBSBksAirhcPKVRiRFkFe4FWR65TaA"></script>

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

3.初始化MAP

通常,在body的onload事件里面去初始化地图,我是在KARRY.init函数里面初始化的。把地图的中心默认设置为中国洛阳。

  1. map = new GMap2(document.getElementById('map'));
  2. map.setCenter(new GLatLng(34.68491,112.47605), 6);
  3. map.addControl(new GLargeMapControl());
  4. map.addControl(new GOverviewMapControl());
  5. map.addControl(new GMapTypeControl());

4.搜索关键词

我在KARRY.JS的顶部设置了一个默认的关键词 var keyword = "红酒"; 在初始化地图之后,立即去搜索饭否上包含该关键词的内容:

scratchJson()这个方法中(由于采用了闭包,这个方法是私有方法。)这个方法在立即执行的同时会设置一个定时器,每隔600秒会重新执行一次。也就是10分钟后会重新搜索饭否的数据,看是否有更新。

  1. var s = document.createElement('script');
  2. s.type = 'text/javascript';
  3. s.src = 'http://api.fanfou.com/search/public_timeline.json?q='+keyword +'&' + Math.random() + '&count=30&callback=KARRY.callBack';
  4. 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秒往下读一条数据了。

  1. var p = 0;
  2. if(innerInterval!=null){
  3.    clearInterval(innerInterval);
  4. }
  5. innerInterval = setInterval(function(){
  6.     if (/海外/.exec(j[p].user.location)){
  7.           map.setZoom(3);
  8.     } else {
  9.           map.setZoom(curlevel);
  10.     }
  11.     //弹出框
  12.     map.openInfoWindowHtml(getPoint(j[p].user.location), parseDataToHTML(j[p]));
  13.     counter.innerHTML = j.length - p;
  14.     p++;
  15.     if(p==j.length){
  16.     clearInterval(innerInterval);
  17.     return;
  18. }},10000);

注意里面调用的两个私有方法:getPoint(j[p].user.location)  parseDataToHTML(j[p]),

getPoint前面一个是通过地址名获取对应的经纬度。parseDataToHTML是把内容拼装成DOM,插入到对应的框中。

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

<script type="text/javascript" src="karry/geocode.js"></script>

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

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

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

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

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

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

  1. if(keyword==str){
  2.       alert("当前显示的是"+keyword+"相关的内容");
  3.       return;
  4. }            
  5. keyword = str;
  6. if(!interval){
  7.      clearInterval(interval);
  8. }
  9. if(!innerInterval){
  10.      clearInterval(innerInterval);
  11. }
  12. scratchJson();
  13. interval = setInterval(scratchJson, 600000);
  14. alert("正在从饭否上获取有关"+keyword+"的信息,请稍后");

8.总结

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

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

原文地址:https://www.cnblogs.com/leeolevis/p/1582252.html