使用 JSON 的 JQuery Googlemap V3 地理编码

发布于 2024-12-23 10:10:29 字数 4387 浏览 3 评论 0原文

我已经使用 php 实现了此功能,但我想将其更改为在客户端使用 JQuery。
我想做的是从 Googlemaps 收到的 JSON 文件中获取数据,并用它来将纬度和经度保存到我的数据库中,但是我什至无法将数据放入变量中。

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>


<script type="text/javascript">

$(document).ready(function() 
{
    $("#test").append('STUFF HERE');

    var geocodeURL = 'http://maps.google.com/maps/api/geocode/json?address=92408&sensor=false';

    $.getJSON(geocodeURL, function(data){

            var latitude = data.results.geometry.location.lat;
            var longitude = data.results.geometry.location.lng;

            alert(longitude);

            $("#test").append('<p>'+latitude +'</p><p>'+longitude+'</p>');

    });

});

</script>

<div id="test" ></div>

当我将 GeocodeURL 粘贴到浏览器中时,我得到以下返回结果:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "92408",
               "short_name" : "92408",
               "types" : [ "postal_code" ]
            },
            {
               "long_name" : "San Bernardino",
               "short_name" : "San Bernardino",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "San Bernardino",
               "short_name" : "San Bernardino",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "California",
               "short_name" : "CA",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "San Bernardino, CA 92408, USA",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 34.10665490,
                  "lng" : -117.208780
               },
               "southwest" : {
                  "lat" : 34.0501660,
                  "lng" : -117.3071210
               }
            },
            "location" : {
               "lat" : 34.08685170,
               "lng" : -117.26173290
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 34.10665490,
                  "lng" : -117.208780
               },
               "southwest" : {
                  "lat" : 34.0501660,
                  "lng" : -117.3071210
               }
            }
         },
         "types" : [ "postal_code" ]
      }
   ],
   "status" : "OK"
}

经过一两天或研究和调整后,我无法找出问题所在,我希望这对于已经熟悉的人来说是一个简单的问题去过那里并做到了这一点,因为我被困住了..

------------------------------------------更新----- --------------------------------

据我所知,没有办法用 Google Map 的 JSON 来处理上面的方法,而你必须使用下面的代码:

<script type="text/javascript"

    src="http://maps.googleapis.com/maps/api/js?sensor=true">

</script>


<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>


<script type="text/javascript">

$(document).ready(function() 
{
    var geocoder = new google.maps.Geocoder();
    var address= '92408';

    geocoder.geocode({ 'address': address}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) 
        {
            var TEST = results[0].geometry.location;
            var longitude = results[0].geometry.location.lng;
            alert(TEST);
            alert(longitude);
            } 
        else 
        {
                result = "Unable to find address: " + status;
            }
    });


});

</script>

<div id="test" ></div>

现在的问题是从返回的 JSON 文件的 .location 部分获取实际的纬度和经度。 当'警报(测试); ' 运行后,输出如下:

(34.0868517, -117.26173289999997)

这是正确的经度/纬度对,但是当我尝试输入单独的经度或纬度时,我得到以下输出:(来自警报(经度))

function () {
    return this[a];
}

有人有什么想法吗?

----------------------------------------------------已解决-------- ----------------------------

好的,这是一个简单的解决方案.. 更改:

var longitude = results[0].geometry.location.lng;

为:

var longitude = results[0].geometry.location.lng();

I have implemented this using php, but I wanted to change it to use JQuery on the client's side.
What I am trying to do is get the data from the JSON file recieved from Googlemaps and use it to save the latitude and longitude to my database, however I have been unable to even get the data into variables.

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>


<script type="text/javascript">

$(document).ready(function() 
{
    $("#test").append('STUFF HERE');

    var geocodeURL = 'http://maps.google.com/maps/api/geocode/json?address=92408&sensor=false';

    $.getJSON(geocodeURL, function(data){

            var latitude = data.results.geometry.location.lat;
            var longitude = data.results.geometry.location.lng;

            alert(longitude);

            $("#test").append('<p>'+latitude +'</p><p>'+longitude+'</p>');

    });

});

</script>

<div id="test" ></div>

When I paste the GeocodeURL into the browser I get the following return:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "92408",
               "short_name" : "92408",
               "types" : [ "postal_code" ]
            },
            {
               "long_name" : "San Bernardino",
               "short_name" : "San Bernardino",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "San Bernardino",
               "short_name" : "San Bernardino",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "California",
               "short_name" : "CA",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "San Bernardino, CA 92408, USA",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 34.10665490,
                  "lng" : -117.208780
               },
               "southwest" : {
                  "lat" : 34.0501660,
                  "lng" : -117.3071210
               }
            },
            "location" : {
               "lat" : 34.08685170,
               "lng" : -117.26173290
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 34.10665490,
                  "lng" : -117.208780
               },
               "southwest" : {
                  "lat" : 34.0501660,
                  "lng" : -117.3071210
               }
            }
         },
         "types" : [ "postal_code" ]
      }
   ],
   "status" : "OK"
}

After a day or two or researching and tweaking I haven't been able to find out what's wrong, and I'm hoping that this is an easy question for someone who's already been there and done that, cause I've been stuck..

------------------------------UPDATE-------------------------------------

So as far as I can tell, there's no way to do Google Map's JSON with the above method, and instead you must use the following code:

<script type="text/javascript"

    src="http://maps.googleapis.com/maps/api/js?sensor=true">

</script>


<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>


<script type="text/javascript">

$(document).ready(function() 
{
    var geocoder = new google.maps.Geocoder();
    var address= '92408';

    geocoder.geocode({ 'address': address}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) 
        {
            var TEST = results[0].geometry.location;
            var longitude = results[0].geometry.location.lng;
            alert(TEST);
            alert(longitude);
            } 
        else 
        {
                result = "Unable to find address: " + status;
            }
    });


});

</script>

<div id="test" ></div>

Now the problem is getting the actual latitude and longitude from the .location portion of the returned JSON file.
When the ' alert(TEST); ' is run, the following is output:

(34.0868517, -117.26173289999997)

This is the correct long/lat pair, but when I try to put the individual longitude or latitude I get the following output: (from alert(longitude))

function () {
    return this[a];
}

Any ideas anyone?

-----------------------------------------Solved------------------------------------

Ok, it was a simple solution..
Change :

var longitude = results[0].geometry.location.lng;

to:

var longitude = results[0].geometry.location.lng();

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

看海 2024-12-30 10:10:29

另外,我发现这个线程可能会有所帮助:
将 jquery.getJson 与 Google 地理编码 HTTP 服务结合使用
与不提供回调函数有关

Also, I found this thread which might help:
using jquery.getJson with Google's GeoCoding HTTP Service
Has to do with not providing the call back function

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文