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開發出好的應用
歡迎訪問有趣吧開發者論壇