基于新浪微博API和Google Maps API 的微博广场地图开发

请点Demo



1.新浪微博API
1.1.相关介绍
官方首页http://open.t.sina.com.cn/
微博开放平台是一个基于新浪微博客系统的开放的信息订阅、分享与交流平台。微博开放平台为您提供了海量的微博信息、粉丝关系、以及随时随地发生的信息裂变式传播渠道。
1.2.申请App Key
成功注册可为开发者，后台即有App Key
1.3.API接口文档
网址:http://open.t.sina.com.cn/wiki/index.php/Statuses/public_timeline
statuses/public_timeline
返回最新的20条公共微博。返回结果非完全实时，最长会缓存60秒
1.4核心程序
$.ajax({
type: “get”,
url: “http://api.t.sina.com.cn/statuses/public_timeline.json?source=1039614589“,
dataType:”jsonp”,
beforeSend: function(XMLHttpRequest){},
success: function(data, textStatus){
var i = 0;
$.each(data,function(i) {
var timeDefault = data[i].created_at,time,timeDiff,date = new Date(),hours,minutes,seconds;
var weiboUrl= “http://t.sina.com.cn/“,url;
time = timeDefault.slice(11,20) ;//完整时间23:11:10
hours = -timeDefault.slice(11,13) + date.getHours();
minutes = -timeDefault.slice(14,16) + date.getMinutes();
seconds = -timeDefault.slice(17,19) + date.getSeconds();
var hoursDiff = hours + “Hour” ;
if (hours<1) hoursDiff= “”;
if(minutes>0) timeDiff = hoursDiff+ minutes+ ” Minutes Ago”;

url = (!data[i].user.domain.toString()) ? (weiboUrl + data[i].user.id.toString()) : (weiboUrl + data[i].user.domain.toString());
weiboLocale[i] = data[i].user.location;

weiboHtml[i] = “<div class=’weiboList’>”+
”<p class=’weiboImg’>”+ ”<a href=’”+ url + “‘”+ “target=’_blank’>” +”<img src=”+data[i].user.profile_image_url +”>”+ “</a>” +”</p>”+
”<div class=’weiboTxt’>”+
”<p>”+ “<a href=’”+ url + “‘”+ “target=’_blank’>” +data[i].user.name.toString()+ “</a>” + “:” + data[i].text +”</p>”
+”<p class=’ft’>”+ timeDiff +” ”+ data[i].source + “ ”+ data[i].user.location.toString() +”</p>”
+ “</div>”
+ “</div>”;
});
},
complete: function(XMLHttpRequest, textStatus){
var k= 0;
beginplaceSet = setInterval(function(){
var local = weiboLocale[k];
var html = weiboHtml[k];
placeSet(local,html);
k++;
if (k>weiboLocale.length-1) k=0;
},dalay);
},
error: function(){alert(“error”);}
});

2.Google Maps API
2.1相关介绍
Google 地图 API 是一种通过 JavaScript 将 Google 地图嵌入到您的网页的 API。
2.2Google Maps API 密钥申请
http://code.google.com/intl/zh-CN/apis/maps/signup.html
2.3相关程序
2.3.1初始化一下GMap

var map = new GMap2(document.getElementById(“Gmap”));
function initMap(){
map.setCenter(new GLatLng(39.9, 116.3), zoom);//初始化,于北京
map.enableScrollWheelZoom();
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());//加载小地图
map.addControl(new GScaleControl()); //加载比例尺
}
2.3.2根据地点在map上标注出具体位置,并且把微博的内容在小窗口显示.

var localContent = local;
var htmlContent = html;
var geocoder = new GClientGeocoder();
var response;
geocoder.getLocations(localContent, function(response) {
if (!response || response.Status.code != 200) {
return false;
}else{
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]); //坐标
map.setCenter(point, zoom);
marker = new GMarker(point);//标记地图上的位置
//map.clearOverlays();//清除所有叠加层
map.addOverlay(marker);//增加新叠加层
map.removeOverlay(marker);//清除所有标记
marker.bindInfoWindowHtml(htmlContent,{maxWdith:100,noCloseOnClick:true});
marker.openInfoWindowHtml(htmlContent,{maxWdith:100,noCloseOnClick:true});
}
});