基于新浪微博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});
    }
});