2011-03-30 112 views
2

我目前正在使用json格式定期(每30秒)從兩個指定的橄欖球隊在英國內部抓取兩條推文的應用程序。在json文件中,我可以訪問當前文本(曼徹斯特,布裏斯托爾等)的每條推文的位置。用Google Maps地理編碼API掙扎

我需要做的是以某種方式對位置進行地理編碼,並使用lat,lng協作將推特數據繪製到多個(2)infowindows上。我在使用geocode API時遇到了一些問題,但還沒有成功。目前我只想輸出合作伙伴到一個測試股,看看它是否有效,但事實並非如此。

我的通用代碼如下,如果有幫助,任何建議或幫助,這將是grrreat! (目前我還只是輸出twitter的數據轉換成佔位符的div的同時)

//create urls for grabbing both teams tweets in the UK area 
var url1="http://search.twitter.com/search.json?q= 
%23"+team1+"&callback=?&geocode=53.779292%2C-1.579413%2C350mi"; 
var url2="http://search.twitter.com/search.json?q= 
%23"+team2+"&callback=?&geocode=53.779292%2C-1.579413%2C350mi"; 

function team1tweets() 
{ 
      $.getJSON(
      url1,function(results){ // get the tweets 
      var res1 = results.results[0].text; 
      var user1name = results.results[0].from_user; 
      var user1Location = results.results[0].location; 

      // get the first tweet in the response and place it inside the div 
      $("#last-tweet1").html(res1 + "<p>from: " + user1name + " (" + 
user1Location + ")</p><p>"); 
      } 
      ); 

      //convert location into longitude and latitude 
      var convertLocUrl1 = "http://maps.googleapis.com/maps/api/geocode/ 
json?address=" + userLocation1 + "&sensor=false&region=uk"; 
      convertLocUrl1,function(locResult){ 
      var lat1 = locResult.results[0].geometry.location.lat(); 
      var lng1 = locResult.results[0].geometry.location.lng(); 
      $("#testDiv").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</ 
p>"); 
      } 

} 

function team2tweets() 
{ 
      $.getJSON(
      url2,function(results){ // get the tweets 
      var res2 = results.results[0].text; 
      var user2name = results.results[0].from_user; 
      var user2Location = results.results[0].location; 
      $("#last-tweet2").html(res2 + "<p>from: " + user2name + " (" + 
user2Location + ")</p>"); // get the first tweet in the response and 
place it inside the div 
      }); 

//convert location into longitude and latitude 
      var convertLocUrl2 = "http://maps.googleapis.com/maps/api/geocode/ 
json?address=" + userLocation2 + "&sensor=false&region=uk"; 
      convertLocUrl2,function(locResult){ 
      var lat2 = locResult.results[0].geometry.location.lat(); 
      var lng2 = locResult.results[0].geometry.location.lng(); 
      $("#testDiv2").html("latitude:" + lat2 + "<p>longitude:" + lng2 + "</ 
p>"); 
      } 
} 

team1tweets(); 
team2tweets(); 

setInterval(checkStream1,20000); 
setInterval(checkStream2,20000); 


function checkStream1() 
{ 
      team1tweets(); 
} 

function checkStream2() 
{ 
      team2tweets(); 
} 
}); 
</script> 

更新:新的代碼,使用谷歌地圖API V3

<HTML> 
<HEAD> 
<TITLE>Tweet Ball</TITLE> 
<LINK REL="Stylesheet" href="tweetBallStyles.css"></LINK> 
<script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false" 
type="text/javascript"></script> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/main.js"></script> 

<!--GRABBING AND DISPLAYING TWEETS--> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var team1, team2; 
//get team hashtag info 
team1 = '<?php echo $_GET["team1"]; ?>'; 
team2 = '<?php echo $_GET["team2"]; ?>'; 

//create urls for grabbing both teams tweets in the UK area 
var url1="http://search.twitter.com/search.json?q=%23"+team1+"&callback=?&geocode=53.779292%2C-1.579413%2C350mi"; 
var url2="http://search.twitter.com/search.json?q=%23"+team2+"&callback=?&geocode=53.779292%2C-1.579413%2C350mi"; 
var geocoder = new google.maps.Geocoder(); 

function team1tweets() { 
$.getJSON(
url1, function(results) { // get the tweets 
    var res1 = results.results[0].text; 
    var user1name = results.results[0].from_user; 
    var user1Location = results.results[0].location; 

    // get the first tweet in the response and place it inside the div 
    $("#last-tweet1").html(res1 + "<p>from: " + user1name + " (" + user1Location + ")</p><p>"); 
    //convert location into longitude and latitude 
    geocoder.geocode({ 
     address: user1Location 
     }, function(locResult) { 
      console.log(locResult); 
      var lat1 = locResult[0].geometry.location.lat(); 
      var lng1 = locResult[0].geometry.location.lng(); 
      $("#testDiv").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>"); 
    }); 
}); 
} 


function team2tweets() { 
$.getJSON(
url2, function(results) { // get the tweets 
    var res2 = results.results[0].text; 
    var user2name = results.results[0].from_user; 
    var user2Location = results.results[0].location; 

    // get the first tweet in the response and place it inside the div 
    $("#last-tweet2").html(res2 + "<p>from: " + user2name + " (" + user2Location + ")</p><p>"); 
    //convert location into longitude and latitude 
    geocoder.geocode({ 
     address: user2Location 
     }, function(locResult) { 
      console.log(locResult); 
      var lat2 = locResult[0].geometry.location.lat(); 
      var lng2 = locResult[0].geometry.location.lng(); 
      $("#testDiv2").html("latitude:" + lat2 + "<p>longitude:" + lng2 + "</p>"); 
    }); 
}); 
} 


team1tweets(); 
team2tweets(); 

//setInterval(checkStream1, 10000); 
//setInterval(checkStream2, 10000); 

function checkStream1() { 
team1tweets(); 
} 

function checkStream2() { 
team2tweets(); 
}}) 
</script> 

</HEAD> 


<body> 
<div id="container"> 
<div id="header"></div><!--end of header div--> 

<div id="mainContent"> 
<ul> 
<li><a href="index.php">return to team select</li> 
</ul> 

<div id="testDiv"></div> 
<div id="testDiv2"></div> 

<div id="map_canvas"></div> 

<div id="last-tweet1-container"> 
<div id="last-tweet1"> 
</div> 
</div> 

<div id="last-tweet2-container"> 
<div id="last-tweet2"> 
</div> 
</div> 



<div id="footer"> 
</div> 
</div><!--end of mainContent div--> 
</div><!--end of container div--> 
</BODY> 
</HTML> 
+0

你做什麼'console.log(lat1 +''+ lng1)',什麼是team1和team2? – kjy112 2011-03-30 16:36:37

+0

我試過console.log,但沒有出現在Firebug中。 team1和team2是包含twitter標籤的變量(例如,afc) – Jono 2011-03-30 17:13:20

+0

@Jono你可以給我關於這兩個字段的虛擬數據嗎? – kjy112 2011-03-30 17:16:06

回答

2

下面是使用谷歌地圖V3的JSFiddle Demo: API的地理編碼,以獲取您所在位置的緯度和經度:

我可以將您的代碼無錯地修改爲以下內容。基本上,您必須在您的第一個getJSON中調用Google Map地理編碼,因爲user1Location是異步回調的,因此在您的twitter json回調之外訪問時未定義。 AFAIK,Google Geocode VIA HTTP does not allow JSONP,因此,通過JavaScript VIA Ajax檢索HTTP是違反跨域策略的。另一種選擇是使用Google Map API V3的地理編碼,或者您可以使用服務器端來檢索HTTP JSON。

function team1tweets() { 
    $.getJSON(
    url1, function(results) { // get the tweets 
     var res1 = results.results[0].text; 
     var user1name = results.results[0].from_user; 
     var user1Location = results.results[0].location; 

     // get the first tweet in the response and place it inside the div 
     $("#last-tweet1").html(res1 + "<p>from: " + user1name + " (" + user1Location + ")</p><p>"); 
     //convert location into longitude and latitude 
     var convertLocUrl1 = "http://maps.googleapis.com/maps/api/geocode/json?address=" + user1Location + "&sensor=false&region=uk"; 
     $.getJSON(convertLocUrl1,function(locResult) { 
       var lat1 = locResult.results[0].geometry.location.lat(); 
       var lng1 = locResult.results[0].geometry.location.lng(); 
       $("#testDiv").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>"); 
     }); 
    }); 
} 

UPDATE:

這裏是讓你希望的位置的經緯度的谷歌地圖API V3方式。應用類似的代碼到您的team2tweets()。我基本上用google.map.Geocode取代你的$ .getJSON:

function team1tweets() { 
    $.getJSON(
    url1, function(results) { // get the tweets 
     var res1 = results.results[0].text; 
     var user1name = results.results[0].from_user; 
     var user1Location = results.results[0].location; 

     // get the first tweet in the response and place it inside the div 
     $("#last-tweet1").html(res1 + "<p>from: " + user1name + " (" + user1Location + ")</p><p>"); 
     //convert location into longitude and latitude 
     geocoder.geocode({ 
      address: user1Location 
      }, function(locResult) { 
       console.log(locResult); 
       var lat1 = locResult[0].geometry.location.lat(); 
       var lng1 = locResult[0].geometry.location.lng(); 
       $("#testDiv").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>"); 
     }); 
    }); 
} 
+0

感謝您爲我着想!我以爲我在使用Google Map API V3地理編碼。這與我在做什麼不同?我瀏覽了他們的文檔,但找不到任何具體的東西,我需要什麼。 – Jono 2011-03-30 19:02:37

+0

@Jono如果您認爲合適,請立即/接受答案 – kjy112 2011-03-30 19:03:53

+0

@Jono您通過HTTP使用谷歌地圖地理編碼,類似於您使用Twitter進行的操作。谷歌不允許他們的Geocode HTTP上使用JSONP,因此,你通過客戶端有問題。但是,如果您使用谷歌地圖JavaScript API,然後地理編碼將工作。這一切都與使用JSONP時的跨域相關。 – kjy112 2011-03-30 19:05:57