如何从 JSON 中获取地理坐标？推特 API

Question

这是 JSON 输出的内容

{
  "created_at": "Wed, 09 May 2012 22:13:32 +0000",
  "from_user": "EastCClothing",
  "from_user_id": 119699125,
  "from_user_id_str": "119699125",
  "from_user_name": "Tester23",
  "geo": {
    "coordinates": [
      54.9742,
      -1.5974
    ],
    "type": "Point"
  },
  "id": 200347799861198850,
  "id_str": "200347799861198849",
  "iso_language_code": "pt",
  "metadata": {
    "result_type": "recent"
  },
  "profile_image_url": "http://a0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png",
  "profile_image_url_https": "https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png",
  "source": "<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>",
  "text": "#CM0655 GEO",
  "to_user": null,
  "to_user_id": 0,
  "to_user_id_str": "0",
  "to_user_name": null
}, 

我想要做的是获取坐标，以便我可以将它们与谷歌地图 api 一起使用，我可以访问所有其他详细信息，但无法通过我预期的“json”访问坐标.results[i].geo.coordinates'。这是我的 JQuery

$(function(){
    function searchTweets() {
        var url='http://search.twitter.com/search.json?callback=?&q=cm0655';
        $.getJSON(url,function(json){


            var output = [];


            for (var i = 0, len = json.results.length; i < len; i++) {


               output.push('<p id="tweet"><img id="tweetImage" src="' + json.results[i].profile_image_url + '" width="48" height="48" /><span id="tweetText">' + '<a href="http://twitter.com/' + json.results[i].from_user + '">' + json.results[i].from_user + "</a> " + json.results[i].text + "<br />" + json.results[i].created_at + '</p>' + json.results[i].geo.coordinates + '</span>');
            }

            $("div.twitter2").html(output.join('')).slideDown('slow');
        });
    }


    var timer = setInterval(searchTweets, 20000);


    searchTweets();

});

非常感谢

Answer 1

我想我会添加 $.each 方法，以防万一有人走上这条路。

    // The code below uses the Twitter API found here https://dev.twitter.com/docs to search for the latest mention of CM0655 (module code).

    var twitterURL = "http://search.twitter.com/search.json?q=%23CM0655";
    function twitterSearch() { // Create the weather function   
        $.ajax({
        url: twitterURL, //http request string for the weather service
        dataType: "jsonp",                                                                                                  
        success: function(JSON) {                      // If successful parse the JSON data
            $('#twitterSearch').html("");
            $.each(JSON.results, function(i,tweet){
                    var tweeterID  = tweet.from_user_id;
                    var dateFormat = tweet.created_at;
                    var newDate    = dateFormat.replace('+0000', '');
                    var title      = 'title="Tweeted from"';
                    var id         = tweet.id;
                    var locData    = tweet.geo;
                    getCordsData(locData);
                    $('#twitterSearch').append('<li id="tweet' + id + '" class="mainP tweet"><img class="tweetImage" src="'+ tweet.profile_image_url +'" height="20" width="20" /> <a class="tweetLink" href="http://twitter.com/' + tweet.from_user + '" target="_blank">' + tweet.from_user + '</a> on the ' + newDate + ' <br /> tweeted<span id="tweetTextColor">: ' + tweet.text + '</span></li>');
            });
        //alert("Ajax text");
        setTimeout(twitterSearch, 10000);
        }
        }); // End of ajax
     } // End of function

    function getCordsData(data){
        if(data == null){
            data = "No location data found!";
            alert(data);
        }else{
            var long = data['coordinates'][0];
            var lat = data['coordinates'][1];
            alert("long:" + long + "Lat:" + lat);
        }
    }

Answer 2

抱歉之前的失败，我找到了一个解决方案，您需要做的是检查 results.geo 是否是一个对象，然后循环如果不排除它或将其设置为我已经完成的其他内容

免责声明 这不是最好的解决方案，但它可以让您了解如何解决问题。希望对您有所帮助！

$(function() {
    function searchTweets() {
        var url = 'http://search.twitter.com/search.json?callback=?&q=from:Eastcclothing';
        $.getJSON(url, function(json) {

            console.log(json);
            var output = [];


            for (var i = 0, len = json.results.length; i < len; i++) {

                if ($.isPlainObject(json.results[i].geo)) {
                    output.push('<p id="tweet"><img id="tweetImage" src="' + json.results[i].profile_image_url + '" width="48" height="48" /><span id="tweetText">' + '<a href="http://twitter.com/' + json.results[i].from_user + '">' + json.results[i].from_user + "</a> " + json.results[i].text + "<br />" + json.results[i].created_at + '</p>' + json.results[i].geo.coordinates + '</span>');
                } else {
                    output.push('<p id="tweet"><img id="tweetImage" src="' + json.results[i].profile_image_url + '" width="48" height="48" /><span id="tweetText">' + '<a href="http://twitter.com/' + json.results[i].from_user + '">' + json.results[i].from_user + "</a> " + json.results[i].text + "<br />" + json.results[i].created_at + '</p>' + json.results[i].geo + '</span>');
                }
            }

            $("div.twitter2").html(output.join('')).slideDown('slow');
        });
    }


    var timer = setInterval(searchTweets, 20000);


    searchTweets();

});​

也可以帮助继承一个有效的 jsfiddle http://jsfiddle.net/th3fallen/jc2Kf/

Answer 3

我认为您遇到了问题，因为您试图将数组与字符串连接起来，您可能需要做的是：

...+"["+json.results[i].geo.coordinates[0]+","+json.results[i].geo.coordinates[1]+"]"+...

而不仅仅是

...+json.results[i].geo.coordinates+...

---

或者试试这个：

if (json.results[i].geo) console.log('<p id="tweet"><img id="tweetImage" src="' + json.results[i].profile_image_url + '" width="48" height="48" /><span id="tweetText">' + '<a href="http://twitter.com/' + json.results[i].from_user + '">' + json.results[i].from_user + "</a> " + json.results[i].text + "<br />" + json.results[i].created_at + '</p>' + "["+json.results[i].geo.coordinates[0]+","+json.results[i].geo.coordinates[1]+"]" + '</span>');

甚至：

if (json.results[i].geo) console.log($('<p id="tweet"><img id="tweetImage" src="' + json.results[i].profile_image_url + '" width="48" height="48" /><span id="tweetText">' + '<a href="http://twitter.com/' + json.results[i].from_user + '">' + json.results[i].from_user + "</a> " + json.results[i].text + "<br />" + json.results[i].created_at + '</p>' + "["+json.results[i].geo.coordinates[0]+","+json.results[i].geo.coordinates[1]+"]" + '</span>'));

并确保 html 看起来正确。

我注意到的另一个问题是您在</p> 标记之前关闭了</span> 标记，这是无效的html。我不认为这是你的问题（可能是？），但你应该解决它。