Javascript 从地址获取经纬度_Javascript_Google Maps_Asynchronous

Javascript 从地址获取经纬度

javascript google-maps asynchronous

Javascript 从地址获取经纬度,javascript,google-maps,asynchronous,Javascript,Google Maps,Asynchronous,我使用下面的代码（发布的整个html代码）从地址返回纬度经度，但我的问题是调用函数的方式，否则会处理纬度经度。函数返回null，但如果我在函数中显示内容（请搜索“alert（results[0].geometry.location）；//此处工作正常”，我会收到正确的值 getLatLng函数返回null的javascript代码有什么问题 <!DOCTYPE html> <html> <head> <meta name="viewport"

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

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

<!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>


地理编码服务
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
#面板{
位置：绝对位置；
顶部：5px；
左：50%；
左边距：-180px；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
}
var地理编码器；
var映射；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（-34.397150.644）；
变量映射选项={
缩放：8，
中心：拉丁
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
}
函数代码地址（）{
var address=document.getElementById（'address'）。值；
警报（getLatLng（地址））；
}
var getLatLng=函数（statddress）{
返回geocoder.geocode（{'address'：stAddress}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
警报（结果[0].geometry.location）；//在这里工作正常
返回结果[0]。geometry.location；
}否则{
返回-1；
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

您将结果返回给地理代码，而不是外部函数-getLatLng。查找回调函数和地理编码器，这将更有意义。我上周遇到了这个问题，我终于明白了这一点。

这里的问题是，您正在处理异步代码，但您希望它的行为像同步代码一样代码。这意味着

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

方法发挥神奇作用时，您应该会看到警报。希望这一切现在更有意义。干杯

下面是

请您更具体一些，并对代码提出一些建议好吗？Geocoder是它自己的功能，因此返回其中的值不会改变getLatLng中的任何值。最好查看一下它，它确实有助于我复制