将地址转换为纬度和经度的Javascript地理编码不起作用

Question

将地址转换为纬度和经度的Javascript地理编码不起作用

62

我正在使用以下地理编码函数将文本地址转换为纬度和经度数字，但它没有正常工作。提示写入“undefined”。

有人能说出问题在哪里吗？

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var geocoder = new google.maps.Geocoder();
var address = "new york";

geocoder.geocode( { 'address': address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.latitude;
    var longitude = results[0].geometry.location.longitude;
    alert(latitude);
    } 
}); 
</script>

- Ash

4个回答

54

您正在错误地访问纬度和经度。

尝试使用

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var geocoder = new google.maps.Geocoder();
var address = "new york";

geocoder.geocode( { 'address': address}, function(results, status) {

  if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    alert(latitude);
  } 
}); 
</script>

- Dancrumb

@Damcrumb，你能帮我解决这个问题吗？ http://stackoverflow.com/questions/17587352/geocode-does-not-determine-point-location-exactly-on-google-map - Jeyhun Rahimov

2

这是很棒的代码，但我还有一个问题，如果我需要在我的Javascript执行中使用这些值，而不仅仅是在geocode调用的参数函数内部使用，该怎么办？谢谢。 - axel

以上代码缺少必需的 API 密钥，将无法正常工作。 - WebDude0482

5

脚本标签到API的链接最近已经更改。使用类似以下的代码来查询地理编码API并获取JSON对象返回。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/geocode/json?address=THE_ADDRESS_YOU_WANT_TO_GEOCODE&key=YOUR_API_KEY"></script>

这段文本的翻译如下：

地址可以是以下格式之一：

1600 Amphitheatre Parkway, Mountain View, CA

或者

1600+Amphitheatre+Parkway,+Mountain+View,+CA (URI编码；您可以通过谷歌搜索获得非常有用的信息)

通过在浏览器中输入此地址https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY，再加上我的API密钥，我会收到一个JSON对象，其中包含Moutain View，CA市的纬度和经度。

{"results" : [
  {
     "address_components" : [
        {
           "long_name" : "1600",
           "short_name" : "1600",
           "types" : [ "street_number" ]
        },
        {
           "long_name" : "Amphitheatre Parkway",
           "short_name" : "Amphitheatre Pkwy",
           "types" : [ "route" ]
        },
        {
           "long_name" : "Mountain View",
           "short_name" : "Mountain View",
           "types" : [ "locality", "political" ]
        },
        {
           "long_name" : "Santa Clara County",
           "short_name" : "Santa Clara County",
           "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" ]
        },
        {
           "long_name" : "94043",
           "short_name" : "94043",
           "types" : [ "postal_code" ]
        }
     ],
     "formatted_address" : "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
     "geometry" : {
        "location" : {
           "lat" : 37.4222556,
           "lng" : -122.0838589
        },
        "location_type" : "ROOFTOP",
        "viewport" : {
           "northeast" : {
              "lat" : 37.4236045802915,
              "lng" : -122.0825099197085
           },
           "southwest" : {
              "lat" : 37.4209066197085,
              "lng" : -122.0852078802915
           }
        }
     },
     "place_id" : "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",
     "types" : [ "street_address" ]
  }],"status" : "OK"}

像AngularJS这样的Web框架使我们可以轻松执行这些查询。

- AllJs

当执行XHR请求时，如何限制“YOUR_API_KEY”只能在您的网站上使用？我们面临的问题是我们无法将密钥限制为适当的引用方，API的响应类似于“geocode api应该使用服务器密钥”。显然，我们可以在服务器端实现此功能并仅代理请求，但这似乎很奇怪。有没有办法在客户端地理编码并限制API密钥？ - Daniel G.

1

我能想到的唯一解决方案就是将API_KEY作为变量存储在服务器上，并通过客户端的AJAX调用来访问它。我不知道还有其他方法... 不过，这是一个非常好的问题。 - AllJs

然而，这并不能解决问题。

您仍将使用服务器密钥进行XHR调用（如果您将密钥限制为服务器的IP，则会被Google阻止）。
您仍将公开访问您的服务器密钥，这是您不想做的。

实现XHR请求的正确方法是使用Javascript库。https://developers.google.com/maps/documentation/geocoding/intro vs. https://developers.google.com/maps/documentation/javascript/geocoding因此，如果您想将“YOUR_API_KEY”限制为引用者，则需要使用JS API。 - Daniel G.

0

searchLatAndLngByStreet(street) {
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': street }, (res, status) => {
      console.log(res, status)
      if (status == google.maps.GeocoderStatus.OK) {
        return {
          latitude: JSON.stringify(res[0].geometry.location.lat()),
          longitude: JSON.stringify(res[0].geometry.location.lng())
        }
      } 
    });
}

- Flavio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Skadlig · Accepted Answer

试着使用这个替代方案：

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

谷歌的API有些难以理解，但这里有相关文档。

我遇到的一个问题是如何从坐标获取地址。以下是我使用的代码，请注意我还使用了jQuery。

$.each(results[0].address_components, function(){
    $("#CreateDialog").find('input[name="'+ this.types+'"]').attr('value', this.long_name);
});

我正在做的是遍历所有返回的address_components并测试它们的类型是否与表单中我拥有的任何输入元素名称匹配。如果匹配，则将元素的值设置为address_components值。
如果您只对整个格式化地址感兴趣，则可以参考Google的示例。