【发布时间】：2013-05-12 23:11:52
【问题描述】：
我一直在做一个附带项目，但遇到了障碍。我可以通过标签搜索并显示他们的图片结果，但我还想在每张图片下方放置详细信息，特别是位置信息。我在 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');
});
【问题讨论】：
-
你的代码有 jsfiddle 吗？您是否在控制台中查看过您遇到了什么错误？
-
jsfiddle.net/FNM7G/1 - 虽然我在某个地方搞砸了。不记得这个网站对我来说是什么，很高兴你提到它。谢谢！我不完全确定这些错误。
-
我其实只是想在这个网站上扩展：grammy.eduvoyage.com 功能是一样的，但我想从每张图片中提取更多信息。在某个时候，我也想获取这些位置 ID，并将它们显示在图像下方的 Google 地图上。
-
所以你使用的是jquery和下划线？我没有看到您的 jsfiddle 中包含任何一个？
-
我应该提一下，我对这一切都很陌生，只是按照教程来完成这一切 ^^;本教程：eduvoyage.com/instagram-search-app.html
标签： javascript loops location instagram geotagging