用Google Maps地理编码API挣扎

问题描述：

我目前正在使用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>

你做什么'console.log（lat1 +''+ lng1）'，什么是team1和team2？ – kjy112 2011-03-30 16:36:37

我试过console.log，但没有出现在Firebug中。 team1和team2是包含twitter标签的变量（例如，afc） – Jono 2011-03-30 17:13:20

@Jono你可以给我关于这两个字段的虚拟数据吗？ – kjy112 2011-03-30 17:16:06

答

下面是使用谷歌地图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>"); 
     }); 
    }); 
}

感谢您为我着想！我以为我在使用Google Map API V3地理编码。这与我在做什么不同？我浏览了他们的文档，但找不到任何具体的东西，我需要什么。 – Jono 2011-03-30 19:02:37

@Jono如果您认为合适，请立即/接受答案 – kjy112 2011-03-30 19:03:53

@Jono您通过HTTP使用谷歌地图地理编码，类似于您使用Twitter进行的操作。谷歌不允许他们的Geocode HTTP上使用JSONP，因此，你通过客户端有问题。但是，如果您使用谷歌地图JavaScript API，然后地理编码将工作。这一切都与使用JSONP时的跨域相关。 – kjy112 2011-03-30 19:05:57

用Google Maps地理编码API挣扎

相关推荐