源码下载(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开发出好的应用
欢迎访问 有趣吧开发者论坛
效果参考: 海内存知己,天涯共有趣
原理:
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开发出好的应用
欢迎访问 有趣吧开发者论坛