当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Getting location data from an image (Instagram/JS)

问题描述:

I've been working on a side project and have hit a roadblock. I can search through tags and display their picture results just fine, but I'd also like to put the details below each picture, specifically the location information. I'm doing this in Javascript, and commented out the lines I believe need to be adjusted, but with the comment marks removed not even the pictures show up. Any tips? A JSON object printed by a call to Instagram returns this data:

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

And my code looks like this:

// 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');

});

网友答案:

This works, as long as the photo has location data, not all of them do

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');  
});

On jsfiddle

分享给朋友:
您可能感兴趣的文章:
随机阅读: