json 与谷歌地理编码 API

发布于 2024-10-12 00:47:07 字数 1048 浏览 6 评论 0原文

这是输入位置时获取纬度和经度的代码。根据我的知识，我相信我的代码是正确的。但是输入位置后我得到一个空白页面。

这是代码：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    var url="http://maps.googleapis.com/maps/api/geocode/json?address=";
    var query;
    var sensor="&sensor=false";
    var callback="&callback=?";


    $("button").click(function(){
          query=$("#query").val();
          $.getJSON(url+query+sensor+callback,function(json){

             $('#results').append('<p>Latitude : ' + json.results.geometry.location.lat+ '</p>');
             $('#results').append('<p>Longitude: ' + json.results.geometry.location.lng+ '</p>');

});


    });
});


</script>

</head>
<body>

<input type="text" id="query" /><button>Get Coordinates</button>
<div id="results"></div>

</body>
</html>

原文

Here is code which gets latitude and longitute when entered a location.I believe that my code right according to my knowledge.but i get a blank page after entering a place.

Here is the code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    var url="http://maps.googleapis.com/maps/api/geocode/json?address=";
    var query;
    var sensor="&sensor=false";
    var callback="&callback=?";


    $("button").click(function(){
          query=$("#query").val();
          $.getJSON(url+query+sensor+callback,function(json){

             $('#results').append('<p>Latitude : ' + json.results.geometry.location.lat+ '</p>');
             $('#results').append('<p>Longitude: ' + json.results.geometry.location.lng+ '</p>');

});


    });
});


</script>

</head>
<body>

<input type="text" id="query" /><button>Get Coordinates</button>
<div id="results"></div>

</body>
</html>

分享到QQ

分享到微博

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

发布评论

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

孤芳又自赏 2024-10-19 00:47:07

在 Google Maps Javascript V3 中，您可以使用 google.maps.Geocoder 类访问地理编码服务。

var myAddressQuery = 'O. J. Brochs g 16a, Bergen';
var geocoder = new google.maps.Geocoder(); 
geocoder.geocode(
    { address : myAddressQuery, 
      region: 'no' 
    }, function(results, status){
      // result contains an array of hits.
});

https://developers.google.com/maps/documentation/javascript/examples /地理编码-简单

In Google Maps Javascript V3 you can access the geocoding service using the google.maps.Geocoder class.

var myAddressQuery = 'O. J. Brochs g 16a, Bergen';
var geocoder = new google.maps.Geocoder(); 
geocoder.geocode(
    { address : myAddressQuery, 
      region: 'no' 
    }, function(results, status){
      // result contains an array of hits.
});

https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

回复收藏 0 原文

情丝乱 2024-10-19 00:47:07

您尝试在这里使用 JSONP。

JSONP
如果 URL 包含字符串“callback=?” （或类似的，由服务器端 API 定义），请求 >而是被视为 JSONP。有关更多详细信息，请参阅 $.ajax() 中对 jsonp 数据类型的讨论。
重要提示：从 jQuery 1.4 开始，如果 JSON 文件包含语法错误，请求通常会默默失败。

请参阅： http://api.jquery.com/jQuery.getJSON/

但是您的 URL调用返回 plain JSON，因此解析失败并出现语法错误，并且 getJSON 默默地失败。

现在，当您尝试更改地理编码 URL 以使用 JSONP 时，您会收到 404 错误，因为 Google 很久以前就删除了对 JSONP 的支持：

简而言之：
您不能再简单地使用浏览器 JavaScript 中的地理编码 api，您必须在服务器上添加代理脚本。

即使请求有效，您的代码中仍然存在错误：

json.results 是结果的数组，因此它没有几何图形属性。

您必须访问数组的第一个元素才能获取具有 geometry 属性的实际对象：

json.results[9].geometry.location.lng

You're trying to use JSONP here.

JSONP
If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request > is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.
Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently.

See: http://api.jquery.com/jQuery.getJSON/

But the URL you're calling returns plain JSON, so the parsing fails with a syntax error and getJSON fails silently.

Now when you try to change the geocode URL to use JSONP, you get a 404 error since Google has removed support for JSONP quite a while ago:

In short:
You cannot simply use the geocode api from Browser JavaScript anymore, you'll have to add a proxy script on your server.

And even if the request would work, your code still has a bug in it:

json.results is an array of results, so it has no geometry property.

You have to access the first element of the array in order to get to the actual object that has the geometry property: