2011-12-08 16 views
0

誰もFoursquare Javascriptライブラリをhereから試しましたか?私はそれを働かせるように見えない。サンプルコード(会場検索用)を試すと、onSuccessコールとonFailureコールバックのどちらも起動されません。私はindex.htmlファイルの foursquare-js-api.jsを参照しました。他のjsファイルとともに "lib"フォルダを追加しました。私は私のメインページのボタンから呼び出す関数(venueTest)にその例をラップしました。 Phonegap 1.1.0とjQTouchを使用しています。私はAPIのフォーラムでも投稿しましたが、そこには多くのアクティビティがあるようには見えません。Foursquare Javascript API

答えて

0

あなたはそれの便利なマッシュアップを作成するためにいくつかの呼び出しを呼び出し、チェーンことができます。このコードでは、正方形の保存ボタンを動的に生成する方法も示しています。

<!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> 
関連する問題