從圖像獲取位置數據（Instagram/JS）

Question

我一直在做一個側面項目，並遇到了障礙。我可以搜索標籤並顯示他們的圖片結果，但我還想在每張圖片下面詳細說明位置信息。我在Javascript中這樣做，並且將我認爲需要調整的行註釋掉了，但註釋標記被刪除，甚至沒有顯示圖片。有小費嗎？通過對Instagram的通話印刷的JSON對象返回此數據：

Object 
    - data: Array[20] 
    - 0: Object 
     + caption: Object 
     + comments: Object 
     created_time: "1334402906" 
     filter: "Nashville" 
     id: "169306311223447303_5913362" 
     - images: Object 
     + low_resolution: Object 
     - standard_resolution: Object 
      height: 612 
      url: "http://distilleryimage7.instagram.com/f3f8d7b2862411e19dc71231380fe523_7.jpg" 
      width: 612 
     + thumbnail: Object 
     + likes: Object 
      link: "http://instagr.am/p/JZfzFqtI8H/" 
      location: Object 
      tags: Array[1] 
      type: "image" 
      user: Object 

我的代碼如下所示：

// Instantiate an empty object. 
var Instagram = {}; 

// Small object for holding important configuration data. 
Instagram.Config = { 
    clientID: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 
    apiHost: 'https://api.instagram.com' 
}; 


// ************************ 
// ** Main Application Code 
// ************************ 
(function(){ 
    var photoTemplate, resource; 

    function init(){ 
    bindEventHandlers(); 
    photoTemplate = _.template($('#photo-template').html()); 
    } 

    function toTemplate(photo){ 
    photo = { 
     count: photo.likes.count, 
     avatar: photo.user.profile_picture, 
     photo: photo.images.low_resolution.url, 
     url: photo.link 
     //location: photo.location <--------------------------This line. 
    }; 

    return photoTemplate(photo); 
    } 

    function toScreen(photos){ 
    var photos_html = ''; 
    //var photos_location = ''; <------------------------This line. 

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id) 
        .fadeIn(); 

    $.each(photos.data, function(index, photo){ 
     photos_html += toTemplate(photo); 
     //photos_location += toTemplate(photo); <-----------------This line. 
    }); 

    $('div#photos-wrap').append(photos_html); 
    //$('div#photos-wrap').append(photos_location) <------------------This line. 
    } 


    function generateResource(tag){ 
    var config = Instagram.Config, url; 

    if(typeof tag === 'undefined'){ 
     throw new Error("Resource requires a tag. Try searching for cherry blossoms."); 
    } else { 
     // Make sure tag is a string, trim any trailing/leading whitespace and take only the first 
     // word, if there are multiple. 
     tag = String(tag).trim().split(" ")[0]; 
    } 

    // Configures the URL to search for pictures that fit the tag description. 
    url = config.apiHost + "/v1/tags/" + tag + "/media/recent?callback=?&client_id=" + config.clientID; 

    return function(max_id){ 
     var next_page; 
     if(typeof max_id === 'string' && max_id.trim() !== '') { 
     next_page = url + "&max_id=" + max_id; 
     } 
     return next_page || url; 
    }; 
    } 

    function paginate(max_id){ 
    $.getJSON(generateUrl(tag), toScreen); 
    } 

    function search(tag){ 
    resource = generateResource(tag); 
    $('.paginate a').hide(); 
    $('#photos-wrap *').remove(); 
    fetchPhotos(); 
    } 

    function fetchPhotos(max_id){ 
    $.getJSON(resource(max_id), toScreen); 
    } 

    function bindEventHandlers(){ 
    $('body').on('click', '.paginate a.btn', function(){ 
     var tagID = $(this).attr('data-max-tag-id'); 
     fetchPhotos(tagID); 
     return false; 
    }); 

    // Bind an event handler to the `submit` event on the form 
    $('form').on('submit', function(e){ 

     // Stop the form from fulfilling its destinty. 
     e.preventDefault(); 

     // Extract the value of the search input text field. 
     var tag = $('input.search-tag').val().trim(); 

     // Invoke `search`, passing `tag` (unless tag is an empty string). 
     if(tag) { 
     search(tag); 
     }; 

    }); 

    } 

    function showPhoto(p){ 
    $(p).fadeIn(); 
    } 

    // Public API 
    Instagram.App = { 
    search: search, 
    showPhoto: showPhoto, 
    init: init 
    }; 
}()); 


$(function(){ 
    Instagram.App.init(); 

    Instagram.App.search('takoyaki'); 
}); 

Answer 1

這個工作，只要照片具有位置數據，不是所有的人做

CSS

body { 
    background: #e3e8ec url(http://grammy.eduvoyage.com/images/tile.png) repeat 50% 0; 
} 
#search { 
    height: 40px; 
    padding: 10px; 
    text-align: center; 
    position: fixed; 
    width: 240px; 
    margin: 0 auto; 
    z-index: 100; 
    left: 50%; 
    top: 0; 
    margin-left: -130px; 
    border-radius:0 0 5px 5px; 
} 

.search-wrap { 
    background: white; 
    line-height: 30px; 
    height: 30px; 
    text-align: left; 
    border-radius: 3px; 
    width: 230px; 
    margin: 0; 
    border: 1px solid #ddd; 
} 

#photos-wrap { 
    width: 810px; 
    margin: 70px auto 40px auto; 
    position: relative; 
    z-index: 1; 
} 

.photo .avatar { 
    width: 40px; 
    height: 40px; 
    padding: 2px; 
    position: absolute; 
    bottom: 11px; 
    right: 8px; 
    background: white; 
} 

.photo { 
    margin-bottom: 20px; 
    float: left; 
    position: relative; 
    width: 250px; 
    height: 250px; 
    border-radius: 5px; 
    background: white; 
    padding: 5px; 
    margin: 5px; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
} 

.photo .heart { 
    height: 16px; 
    position: absolute; 
    left: 13px; 
    bottom: 16px; 
    padding: 0 5px 0 22px; 
    font-size: 12px; 
    font-weight: bold; 
    line-height: 16px; 
    border-radius: 2px; 
    border: 1px solid #ddd; 
    background: white url('http://grammy.eduvoyage.com/images/fav.png') no-repeat 2px 0; 
} 

.paginate { 
    display: block; 
    clear: both; 
    margin: 10px; 
    text-align: center; 
    margin: 0 auto; 
    padding: 20px 0; 
    height: 100px; 
} 

.location { 
    position: relative; 
    top: -48px; 
    left: 7px; 
    border-style: solid; 
    border-width: 1px; 
    border-radius: 3px; 
    background-color: white; 
} 

HTML

 <div id='photos-wrap'> 
     </div> 

     <div class='paginate'> 
     <a class='btn' style='display:none;' data-max-tag-id='' href='#'>View More...</a> 
     </div> 
    </div> 
    </div> 
</div> 

<script type="text/template" id="photo-template"> 
    <div class='photo'> 
    <a href='<%= url %>' target='_blank'> 
     <img class='main' src='<%= photo %>' width='250' height='250' style='display:none;' onload='Instagram.App.showPhoto(this);'/> 
    </a> 
    <img class='avatar' width='40' height='40' src='<%= avatar %>' /> 
    <span class='heart'><strong><%= count %></strong></span> 
    <span class='location'><%= longitude %> <%= latitude %></span> 
    </div> 
</script> 

的Javascript

// Instantiate an empty object. 
var Instagram = {}; 

// Small object for holding important configuration data. 
Instagram.Config = { 
    clientID: '4895197dfce340cb9004101ce6ae9215', 
    apiHost: 'https://api.instagram.com' 
}; 


// ************************ 
// ** Main Application Code 
// ************************ 
(function(){ 
    var photoTemplate, resource; 

    function init(){ 
    bindEventHandlers(); 
    photoTemplate = _.template($('#photo-template').html()); 
    } 

    function toTemplate(photo){ 
    photo = { 
     count: photo.likes.count, 
     avatar: photo.user.profile_picture, 
     photo: photo.images.low_resolution.url, 
     url: photo.link, 
     longitude: photo.location && photo.location.longitude, 
     latitude: photo.location && photo.location.latitude 
    }; 

    return photoTemplate(photo); 
    } 

    function toScreen(photos){ 
    var photos_html = ''; 

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id) 
        .fadeIn(); 

    $.each(photos.data, function(index, photo){ 
     photos_html += toTemplate(photo); 
    }); 

    $('div#photos-wrap').append(photos_html); 
    } 

    function generateResource(tag){ 
    var config = Instagram.Config, url; 

    if(typeof tag === 'undefined'){ 
     throw new Error("Resource requires a tag. Try searching for cats."); 
    } else { 
     // Make sure tag is a string, trim any trailing/leading whitespace and take only the first 
     // word, if there are multiple. 
     tag = String(tag).trim().split(" ")[0]; 
    } 

    url = config.apiHost + "/v1/tags/" + tag + "/media/recent?callback=?&client_id=" + config.clientID; 

    return function(max_id){ 
     var next_page; 
     if(typeof max_id === 'string' && max_id.trim() !== '') { 
     next_page = url + "&max_id=" + max_id; 
     } 
     return next_page || url; 
    }; 
    } 

    function paginate(max_id){  
    $.getJSON(generateUrl(tag), toScreen); 
    } 

    function search(tag){ 
    resource = generateResource(tag); 
    $('.paginate a').hide(); 
    $('#photos-wrap *').remove(); 
    fetchPhotos(); 
    } 

    function fetchPhotos(max_id){ 
    $.getJSON(resource(max_id), toScreen); 
    } 

    function bindEventHandlers(){ 
    $('body').on('click', '.paginate a.btn', function(){ 
     var tagID = $(this).attr('data-max-tag-id'); 
     fetchPhotos(tagID); 
     return false; 
    }); 

    // Bind an event handler to the `submit` event on the form 
    $('form').on('submit', function(e){ 

     // Stop the form from fulfilling its destinty. 
     e.preventDefault(); 

     // Extract the value of the search input text field. 
     var tag = $('input.search-tag').val().trim(); 

     // Invoke `search`, passing `tag` (unless tag is an empty string). 
     if(tag) { 
     search(tag); 
     }; 

    }); 

    } 

    function showPhoto(p){ 
    $(p).fadeIn(); 
    } 

    // Public API 
    Instagram.App = { 
    search: search, 
    showPhoto: showPhoto, 
    init: init 
    }; 
}()); 

$(function(){ 
    Instagram.App.init(); 

    // Start with a search on cats; we all love cats. 
    Instagram.App.search('cats'); 
}); 

在jsfiddle