Google Map API的使用，实现类似“海内存知己，天涯共饭否”

源码下载（javascript实现）

效果参考:海内存知己，天涯共有趣
原理：
var YOUQU=function()//定义一个javascript类
{
    var map;
    var s=document.createElement('script');
        s.type='text/javascript';
        s.src='http://www.youqubar.com/api/status_json?'+Math.random()+'&count=20&callback=YOUQU.callBack';
        document.getElementsByTagName('head')[0].appendChild(s);
    }
    function parseDataToHTML(src){//src是json中的一个数据，该函数是形成这个数据的表示层html代码
        var html='<div class="entry">';
        html+='<p class="s'+Math.ceil(Math.random()*10)+'">'+src.text+'</p><a href="'+src.user.url+'" _fcksavedurl=""'+src.user.url+'"" _fcksavedurl=""'+src.user.url+'"" target="_blank" class="avatar"><img width="48" src="'+src.user.profile_image_url+'" />'+src.user.name+'</a> 在 <strong>'+(src.user.location||'地球上')+'</strong> <em>'+src.created_at
        +'</em><a href="'+src.user.uurl
        +'" target="_blank"><img src="'+src.user.upic+'" /></a></div>';       
        return html;
    }   
    function getPoint(location){//这是个通用函数，根据位置返回在map上的点
        if(location==''){
            return new GLatLng(34.68491,112.47605);
        }
        else{
            var ltp=LTPlaceList.getDefault();
            var tmp=location.split(' ');
            var province=tmp[0],city=tmp[1];
            var place=ltp.searchPlace(province,1);
            if(place&&place[0]){
                var clds=place[0].getChildren();
                if(!city||clds.length==0){
                    var lat=place[0].getPoint().getLatitude()/100000,lng=place[0].getPoint().getLongitude()/100000;
                }else{
                    for(var i=0,n=clds.length;i<n;++i){
                        if(city==clds[i].getName()){
                            var lat=clds[i].getPoint().getLatitude()/100000,lng=clds[i].getPoint().getLongitude()/100000;break;
                        }
                    }
                }
                return new GLatLng(lat,lng);
            }else{
                return new GLatLng(31.22,126);
            }
        }
    }
    return{
        callBack:function(jsonSource){//定义上面用到的YOUQU.callback，实现定时地图上出现气泡，显示json一个数据
            var counter=document.getElementById('num');
            for(var i=0,n=jsonSource.length;i<n;++i){
                (function(){
                    var p=i;
                    setTimeout(function(){
                        map.openInfoWindowHtml(getPoint(jsonSource[p].user.location),parseDataToHTML(jsonSource[p]));
                        counter.innerHTML=19-p;
                    },p*5000);
                })();
            }
        },
        init:function(){//初始化，大部分是通用函数
            if(GBrowserIsCompatible()){
                map=new GMap2(document.getElementById('map'));
                map.setCenter(new GLatLng(34.68491,112.47605),6);
                map.addControl(new GLargeMapControl());
                map.addControl(new GOverviewMapControl());
                scratchJson();
                setInterval(scratchJson,100000);}//定时调用scratchJson使得map上总是显示最新的数据
            else {alert("对不起，您的浏览器不支持本站的功能，建议使用开源好用的Firefox: http://getfirefox.com");}
        }
    }
}();
其他部分可以参考“海内存知己，天涯共有趣”页面源代码，里边用到google map api以及api.51ditu.com做地理解码
这篇文章实际上介绍给新一代互联网开发者一种访问Google Map API的方法，形成自己网站用户的活动map
这也是现在流行的开发模式，欢迎大家使用有趣吧的API开发出好的应用
欢迎访问有趣吧开发者论坛