Question

我正在使用下面的代码（发布整个html代码）从地址返回纬度经度，但我的问题是我调用函数的方式，否则处理纬度经度。该函数返回null但是如果我在函数内显示内容（请搜索“alert（results [0] .geometry.location）; //在这里正常工作”我收到正确的值，

我的javascript代码有什么问题，getLatLng函数返回null？

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
  var address = document.getElementById('address').value;
  alert (getLatLng(address));
}

var getLatLng = function(stAddress){

  return geocoder.geocode( { 'address': stAddress}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      alert(results[0].geometry.location);// works fine here
      return results[0].geometry.location;
    } else {
      return -1;
    }
  });

}


google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="panel">
      <input id="address" type="textbox" value="Vancouver downtown">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

Answer 1

您将结果返回到地理编码，而不是外部函数 - getLatLng。查找回调函数和地理编码器，它会更有意义。上周我遇到了麻烦，我终于理解了

Answer 2

这里的问题是，您正在处理异步代码，但您希望它的行为类似于同步代码。这意味着geocoder.geocode是一个异步方法，通过调用它，您的执行流程将继续到下一行而不等待结果。稍后，geocoder.geocode会在处理完请求后触发回调。

因此，当您致电getLatLng并尝试查看结果时，它甚至还没有。但是，当它执行时 - 块内的代码已准备好执行：

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

   // When processing done, this part is executed, yey!    

});

例如，您可以在getLatLng方法中传递一个匿名函数，并在geocoder.geocode执行完毕后让它显示返回的值。

而不是：

alert (getLatLng(address));

你这样做：

getLatLng(address, function(value) {

   alert("ok: " + value);

});

你的方法是这样的：

var getLatLng = function(stAddress, cb){

  geocoder.geocode( { 'address': stAddress}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      return cb(results[0].geometry.location);
    } else {
      return cb(-1);
    }
  });

}

请注意，匿名函数在函数内部被命名为cb（回调的简写）。

运行它之后，当geocode方法完成它的魔法时，您应该会看到警报。希望现在这一切都更有意义。欢呼声。

这是Js Fiddle example

从地址获取纬度经度

2 个答案: