Fatal编程技术网

Foursquare Javascript API

javascript

Foursquare Javascript API,javascript,foursquare,Javascript,Foursquare,有人试过Foursquare Javascript库吗？我似乎无法让它工作。当我尝试他们的示例代码（用于场地搜索）时，onSuccess和onFailure回调都不会被触发。我引用了 foursquare js api.js在我的index.html文件中，我添加了“lib”文件夹和其他js文件。我将他们的示例包装在一个函数（venueTest）中，我通过主页上的按钮调用该函数。我正在使用Phonegap 1.1.0和jQTouch。我也在API的论坛上发布过，但那里似乎没有太多活动。fours

有人试过Foursquare Javascript库吗？我似乎无法让它工作。当我尝试他们的示例代码（用于场地搜索）时，onSuccess和onFailure回调都不会被触发。我引用了 
foursquare js api.js
在我的
index.html
文件中，我添加了“lib”文件夹和其他js文件。我将他们的示例包装在一个函数（venueTest）中，我通过主页上的按钮调用该函数。我正在使用Phonegap 1.1.0和jQTouch。我也在API的论坛上发布过，但那里似乎没有太多活动。

foursquare js API不是一个正式的库，你应该联系项目的所有者：

你可以调用并链接几个调用，以使它成为有用的mashup。这段代码还显示了如何动态生成foursquare保存按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />

    <title>Foresquare examples</title>

    <style>
        ul#photos{overflow:hidden; margin:0; padding:0;}
        ul#photos li{overflow:hidden; width: 150px; height: 150px; float:left; list-style-type:none;}
        ul#photos li img{}
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">

        var foursquareApi = {
            clientId: "CLIENT_ID",
            clientSecret: "CLIENT_SECRET",
            oauth_token:"OAUTH_TOKEN",
            code: "CODE",
            redirectUrl : "http://localhost/foursquare/",
            authorize: function(){
                var url = "https://foursquare.com/oauth2/access_token";
                    url += "?client_id="+this.clientId;
                    url += "&client_secret="+this.clientSecret;
                    url += "&grant_type=authorization_code";
                    url += "&redirect_uri="+this.redirectUrl;
                    url += "&code="+this.code;

                    this.getJson(url, function(data){
                        console.log("authorize",data);
                    })
            },
            getCode : function(){
                var url = "https://foursquare.com/oauth2/authenticate";
                    url += "?client_id="+this.clientId;
                    url += "&response_type=code";
                    url += "&redirect_uri="+this.redirectUrl;
                    this.getJson(url, function(data){
                        console.log("code",data);
                    })

            },
            getJson: function(url, callback){
                $.getJSON(url, function(data) {
                  callback(data);
                });
            },
            getPhotos: function(venueAlbums){
                var heightDimension = 150;
                var widthDimension = 150;

                var dimensions = heightDimension+'x'+widthDimension;

                var album = "";
                //loop over groups
                $.each(venueAlbums, function(index, value) {
                    //loop over items
                    $.each(value.items, function(index, v) {
                        album += '<li><img src="'+v.prefix+dimensions+v.suffix+'"></li>';
                    });
                });
                $('#venue #photos').html(album);
            },
            bindTrendEvent: function(){
                var that = this;
                $("a.trendlist").on("click", function(event){
                    event.preventDefault();
                    var venueId = $(this).data("venueid");
                    that.exploreVenue(venueId);
                });
            },
            bindSearchEvent: function(){
                var that = this;
                $("a.searchlist").on("click", function(event){
                    event.preventDefault();
                    var venueId = $(this).data("venueid");
                    that.exploreVenue(venueId);
                });
            },
            bindVenueEvent: function(){
                var that = this;
                $("#venue button").on("click", function(event){
                    event.preventDefault();
                    var venueId = $("#venue").data("venueId");
                    that.markToDo(venueId);
                });
            },
            getLatestVersion: function(){
                var d = new Date();
                var year = d.getFullYear();
                var month = d.getMonth();
                var day = d.getMonth();

                if(month <10){
                    month = "0"+month;
                }
                if(day <10){
                    day = "0"+day;
                }
                return year+month+day;
            },
            search: function(){
                //var location = "40.7,-74"; //chicago
                var location = "51.512535,-0.132351"; //london, shaftesbury avenue
                //var location = "29.43601,106.503525"; //china
                //var location = "51.165691,10.451526"; //germany

                this.viewTrends(location);

                this.exploreVenueCategories();
                //this.exploreCategories();

                var query = "burger king";
                //var query = "mcdonalds";
                var limit = 50;

                var latestversion = this.getLatestVersion();

                var that = this;

                var url = "https://api.foursquare.com/v2/venues/search?ll="+location+"&query="+query+"&limit="+limit+"&oauth_token="+this.oauth_token+"&v="+latestversion;
                console.log("url", url);
                this.getJson(url, function(data){
                    console.log("getting data ", data);
                    var setOfVenues = data.response.venues;
                    var template = '<ul id="searchResults"></ul>';
                    $('body').append(template);

                    $.each(setOfVenues, function(index, value) {
                        console.log(value);
                        var innterListItem = '<li><a class="searchlist" data-venueid="'+value.id+'" href="#">'+value.name+' - '+value.id+'</a></i>';
                        $('#searchResults').append(innterListItem);
                    });
                    that.bindSearchEvent();
                });
            },
            viewTrends: function(location){

                var that = this;

                //var location = "44.3,37.2";
                var limit = 50;
                var radius = 2000 ;

                //&limit="+limit+"&radius="+radius+"
                var latestversion = this.getLatestVersion();

                var url = "https://api.foursquare.com/v2/venues/trending?ll="+location+"&oauth_token="+this.oauth_token+"&v="+latestversion;
                this.getJson(url, function(data){
                    console.log("getting trends", data);

                    var setOfVenues = data.response.venues;
                    var template = '<ul id="trendResults"></ul>';
                    $('body').append(template);

                    $.each(setOfVenues, function(index, value) {
                        console.log(value);
                        var innterListItem = '<li><a class="trendlist" data-venueid="'+value.id+'" href="#">'+value.name+' - '+value.id+'</a></i>';
                        $('#trendResults').append(innterListItem);
                    });
                    that.bindTrendEvent();
                });

            },
            viewEvents: function(venueId){
                var latestversion = this.getLatestVersion();
                var url = "https://api.foursquare.com/v2/venues/"+venueId+"/events?oauth_token="+this.oauth_token+"&v="+latestversion;
                this.getJson(url, function(data){
                    console.log("getting events", data);

                    var setOfEvents = data.response.events.items;
                    //var template = '<ul id="eventResults"></ul>';
                    //$('body').append(template);

                    $('#events').empty();
                    $.each(setOfEvents, function(index, value) {
                        console.log(value);
                        var innterListItem = '<li>'+value.name+' - allday : '+value.allDay+'</i>';
                        $('#events').append(innterListItem);
                    });
                    //that.bindTrendEvent();
                });

            },
            exploreVenueCategories: function(){
                var latestversion = this.getLatestVersion();
                var url = "https://api.foursquare.com/v2/venues/categories?oauth_token="+this.oauth_token+"&v="+latestversion;
                this.getJson(url, function(data){
                    console.log("getting venues categories", data);

                    var setOfVenueCategories = data.response.categories;
                    //var template = '<ul id="eventResults"></ul>';
                    //$('body').append(template);

                    $.each(setOfVenueCategories, function(index, value) {
                        console.log(value.name);

                        //loop over items
                        $.each(value.categories, function(index, v) {
                            console.log("-"+v.name);
                        });
                        //var innterListItem = '<li><a class="trendlist" data-venueid="'+value.id+'" href="#">'+value.name+' - '+value.id+'</a></i>';
                        //$('#eventResults').append(innterListItem);
                    });
                    //that.bindTrendEvent();
                });
            },
            exploreCategories: function(){
                var latestversion = this.getLatestVersion();
                var url = "https://api.foursquare.com/v2/events/categories?oauth_token="+this.oauth_token+"&v="+latestversion;
                this.getJson(url, function(data){
                    console.log("getting categories", data);

                    var setOfCategories = data.response.categories;
                    //var template = '<ul id="eventResults"></ul>';
                    //$('body').append(template);

                    $.each(setOfCategories, function(index, value) {
                        console.log(value.name);

                        //loop over items
                        $.each(value.categories, function(index, v) {
                            console.log("-"+v.name);
                        });
                        //var innterListItem = '<li><a class="trendlist" data-venueid="'+value.id+'" href="#">'+value.name+' - '+value.id+'</a></i>';
                        //$('#eventResults').append(innterListItem);
                    });
                    //that.bindTrendEvent();
                });
            },
            exploreVenue: function(venueId){
                var latestversion = this.getLatestVersion();
                var url = "https://api.foursquare.com/v2/venues/"+venueId+"?oauth_token="+this.oauth_token+"&v="+latestversion;

                var that = this;
                this.getJson(url, function(data){

                    var venue = data.response.venue;
                    console.log("venue",venue);

                    $('#venue #name').html(venue.name);
                    $('#venue #id').html(venue.id);
                    $('#venue #location').html(venue.location.address+"<br>"+venue.location.city+"<br>"+venue.location.country+"<br>"+venue.location.postalCode);
                    $('#venue #rating').html(venue.rating);
                    $('#venue').data("venueId", venue.id);

                    that.viewEvents(venue.id);
                    that.getTips(venue.tips.groups);
                    that.getSpecials(venue.specials);
                    that.getHours(venue.id);

                    var foursquareObj = {
                                            id: venue.id,
                                            name: venue.name,
                                            streetAddress: venue.location.address,
                                            locality: venue.location.city,
                                            region: venue.location.state,
                                            postalCode: venue.location.postalCode,
                                        };

                    var venuePhotoCount = venue.photos.count;
                    var venueAlbums = venue.photos.groups;

                    that.getPhotos(venueAlbums);
                    that.bindVenueEvent();
                    that.myFoursquareReplaceSave(foursquareObj);
                });
            },
            getTips: function(tips){
                    $('#tips').empty();
                    //loop over groups
                    $.each(tips, function(index, value) {
                        //loop over items
                        $.each(value.items, function(index, v) {
                            console.log("the tip ", v.text);
                            $('#tips').append('<li>'+v.text+'</li>');
                        });
                    });
            },
            getSpecials: function(specials){
                    $('#specials').empty();
                    //loop over groups
                    console.log("specials", specials);
            },
            getHours: function(venueId){
                $('#times').hide();
                var daysofweek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

                var latestversion = this.getLatestVersion();
                var url = "https://api.foursquare.com/v2/venues/"+venueId+"/hours?oauth_token="+this.oauth_token+"&v="+latestversion;
                console.log("getHours");
                this.getJson(url, function(data){
                    console.log("data.response", data.response);
                    if(data.response.hours.timeframes != undefined){
                        $('#times').show();
                        $('#times').empty();
                        var timeframes = data.response.hours.timeframes;
                        $.each(timeframes, function(index, value) {
                            //loop over days
                            var startTime = value.open[0].start;
                            var endTime = value.open[0].end;

                            $.each(value.days, function(index, v) {
                                $('#times').append('<li>'+daysofweek[v-1]+'  : '+startTime+'-'+endTime+'</li>');
                            });
                        });
                    }
                });
            },
            markToDo: function(venueId){
                console.log("mark venue id", venueId);
                //https://api.foursquare.com/v2/venues/4d825176bede5481abdd0fd1/marktodo
            },
            myFoursquareReplaceSave: function(foursquareObj) {

                var vcartTitle = "hcard-"+foursquareObj.id;
                var vcard = '<div id="'+vcartTitle+'" class="vcard"><span class="fn"><span class="given-name">'+foursquareObj.name+'</span></span><div class="adr"><div class="street-address">'+foursquareObj.streetAddress+'</div><span class="locality">'+foursquareObj.locality+'</span><span class="region">'+foursquareObj.region+'</span><span class="postal-code">'+foursquareObj.postCode+'</span></div></div>';
                var fourSquareButton = '<a href="https://foursquare.com/intent/venue.html" class="fourSq-widget" data-context="'+vcartTitle+'" data-variant="wide">Save to foursquare</a>';

                $('#foursquare').empty().html(vcard+fourSquareButton);
                this.startWidget();
            },
            init: function(){
                this.search();
            },
            startWidget: function(){
                window.___fourSq = {};
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = 'http://platform.foursquare.com/js/widgets.js';
                s.async = true;
                var ph = document.getElementsByTagName('script')[0];
                ph.parentNode.insertBefore(s, ph);
            }
        };

    </script>

</head>
<body>

        <div id="venue">
            <div id="name"></div>
            <div id="id"></div>
            <div id="location"></div>
            <div id="rating"></div>
            <ul id="photos"><li></li></ul>

            <h3>Events</h3>
            <ul id="events"><li></li></ul>

            <h3>Tips</h3>
            <ul id="tips"><li></li></ul>

            <h3>Specials</h3>
            <ul id="specials"><li></li></ul>

            <h3>Opening Times</h3>
            <ul id="times"><li></li></ul>

            <div id="foursquare">
                <!--
                <div id="hcard-Station-Amsterdam-Centraal" class="vcard">
                    <span class="fn">
                        <span class="given-name">Station Amsterdam Centraal</span>
                    </span>
                    <div class="adr">
                        <div class="street-address">stationsplein 15</div>
                        <span class="locality">Amsterdam</span>,
                        <span class="region">Amsterdam</span> ,
                        <span class="postal-code">1012AB</span>
                    </div>
                </div>
                <div id="hcard-Jaarbeursplein" class="vcard">
                    <span class="fn">
                        <span class="given-name">Jaarbeursplein</span>
                    </span>
                    <div class="adr">
                        <div class="street-address">Jaarbeursplein</div>
                        <span class="locality">Utrecht</span>,
                        <span class="region">Utrecht</span>,
                        <span class="postal-code">3521AL</span>
                    </div>
                </div>

                <a href="https://foursquare.com/intent/venue.html" class="fourSq-widget" data-context="hcard-Station-Amsterdam-Centraal" data-variant="wide">Save to foursquare</a>
                <a href="https://foursquare.com/intent/venue.html" class="fourSq-widget" data-context="hcard-Jaarbeursplein" data-variant="wide">Save to foursquare</a>
                -->
            </div>

            <!-- Place this script somewhere after the anchor tag above. If you have multiple buttons, only include the script once. -->
            <script type='text/javascript'>

                $(document).ready(function() {
                    foursquareApi.init();

                    foursquareApi.startWidget();

                });
            </script>

        </div>
</body>
</html>


方格示例
ul#照片{溢出：隐藏；边距：0；填充：0；}
ul#photos li{溢出：隐藏；宽度：150px；高度：150px；浮动：左；列表样式类型：无；}
ul#照片li img{}
var foursquareApi={
clientId:“客户端ID”，
clientSecret:“客户机密”，
oauth_令牌：“oauth_令牌”，
代码：“代码”，
重定向URL:“http://localhost/foursquare/",
授权：函数（）{
变量url=”https://foursquare.com/oauth2/access_token";
url+=“？客户端_id=“+this.clientId；
url+=“&client_secret=“+this.clientSecret；
url+=“&授权类型=授权代码”；
url+=”&redirect_uri=“+this.redirectUrl；
url+=“&code=“+this.code；
this.getJson（url、函数（数据）{
控制台日志（“授权”，数据）；
})
},
getCode:function（）{
变量url=”https://foursquare.com/oauth2/authenticate";
url+=“？客户端_id=“+this.clientId；
url+=“&响应类型=代码”；
url+=”&redirect_uri=“+this.redirectUrl；
this.getJson（url、函数（数据）{
控制台日志（“代码”，数据）；
})
},
getJson:函数（url，回调）{
$.getJSON（url、函数（数据）{
回调（数据）；
});
},
getPhotos：功能（venueAlbums）{
var高度尺寸=150；
可变宽度尺寸=150；
变量尺寸=高度尺寸+'x'+宽度尺寸；
var album=“”；
//循环组
$.each（venueAlbums，函数（索引，值）{
//循环项目
$.each（value.items，function）（索引，v）{
专辑+='
  • '；
});
});
$（“#地点#照片”）.html（相册）；
},
bindTrendEvent:函数（）{
var=这个；
$（“a.trendlist”）。在（“单击”）上，函数（事件）{
event.preventDefault（）；
var venueId=$（此）.data（“venueId”）；
那.韦努埃（韦努埃）；
});
},
bindSearchEvent:函数（）{
var=这个；
$（“a.searchlist”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
var venueId=$（此）.data（“venueId”）；
那.韦努埃（韦努埃）；
});
},
bindVenueEvent:函数（）{
var=这个；
$（“#场馆按钮”）。在（“单击”）上，功能（活动）{
event.preventDefault（）；
var venueId=$（“场馆”）.数据（“venueId”）；
马克托多（韦纽伊德）；
});
},
getLatestVersion:函数（）{
var d=新日期（）；
var year=d.getFullYear（）；
var month=d.getMonth（）；
var day=d.getMonth（）；
如果（月）
$（文档）.ready（函数（）{
foursquareApi.init（）；
foursquareApi.startWidget（）；
});
    谢谢。我在所有者论坛上发表了一条评论，但我会直接给他们发条。