个人中心
gpt4 book ai didi

javascript - 与谷歌地图地理编码 API 斗争

转载 作者：行者123 更新时间：2023-11-29 22:35:06 27 4
gpt4 key购买 nike

我目前正在开发一个应用程序，该应用程序定期(每 30 秒)使用 json 格式从两个指定的足球队获取英国境内的两条推文。在 json 文件中，我可以访问当前文本的每条推文的位置(曼彻斯特、布里斯托尔等)。

我需要做的是以某种方式对位置进行地理编码，并使用经纬度坐标将推文数据绘制到多个 (2) 信息窗口中。我在使用地理编码 API 方面有所突破，但还没有成功。目前我正在尝试将坐标输出到测试 div 中以查看它是否有效，但事实并非如此。

如果有帮助的话，我的一般代码如下，任何关于这方面的建议或帮助都会很棒!(目前我也只是同时将推特数据输出到占位符 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>

更新:新代码，使用 Google Maps 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>

最佳答案

这是 JSFiddle Demo:使用 Google Map V3 API 的地理编码获取您所在位置的纬度和经度:

我可以将您的代码修改为以下内容而不会出错。基本上，您必须在您的第一个 getJSON 中调用 Google Map Geocode，因为 user1Location 是异步检索的，因此在您的 twitter json 回调之外访问时未定义。据我所知，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>");
        });
    });
}

更新:

这是获取所需位置的 LatLng 的 Google Map 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>");
        });
    });
}

关于javascript - 与谷歌地图地理编码 API 斗争，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5489225/

27 4 0
文章推荐： php - 无法在一个 php 页面上更新数据库
文章推荐： javascript - 如何在struts2应用中集成谷歌地图
文章推荐： android - Request 帮助在 Android 中编写 HTTP 请求
文章推荐： php - 在 where 子句中使用 DATE_ADD 更新 MySQLi 类
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com