如何从Google Maps JavaScript地理编码器返回经度和纬度?

man*_*j82 17 javascript google-maps geocoding

当我使用下面的代码警告空值时?这是为什么?

HTML

<body onload="initialize()">
 <div id="map_canvas" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="display()">
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

JavaScript的

var geocoder;
var map;


  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    var loc=[];

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        loc[0]=results[0].geometry.location.lat();
        loc[1]=results[0].geometry.location.lng();

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });

    return loc;
  }

  function display(){
     var long_lat=codeAddress();
    alert(long_lat);
  }
Run Code Online (Sandbox Code Playgroud)

Max*_*xym 26

因为你的函数codeAddress被执行时,分配空数组为LoC,执行异步请求,以谷歌地理编码器并返回LOC,里面是空的,因为当从谷歌响应来自它的真实值被分配.换句话说,allert应该在内部响应处理程序中:

var geocoder;
var map;


  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    var loc=[];

    // next line creates asynchronous request
    geocoder.geocode( { 'address': address}, function(results, status) {
      // and this is function which processes response
      if (status == google.maps.GeocoderStatus.OK) {
        loc[0]=results[0].geometry.location.lat();
        loc[1]=results[0].geometry.location.lng();

        alert( loc ); // the place where loc contains geocoded coordinates

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });

    // pretty meaningless, because it always will be []
    // this line is executed right after creating AJAX request, but not after its response comes
    return loc;
  }

  function display(){
     codeAddress();
  }
Run Code Online (Sandbox Code Playgroud)

这就是AJAX的工作原理...处理回调处理程序的结果.


如果你想分开地理编码和'dispalying'你可以在处理程序中执行显示功能:

  function codeAddress() {
    var address = document.getElementById("address").value;

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var loc=[]; // no need to define it in outer function now
        loc[0]=results[0].geometry.location.lat();
        loc[1]=results[0].geometry.location.lng();

        display( loc ); 

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });

  }

  function display( long_lat ){
     alert(long_lat);
  }
Run Code Online (Sandbox Code Playgroud)

HTML:

<input type="button" value="Encode" onclick="codeAddress()">
Run Code Online (Sandbox Code Playgroud)


如果您不仅要进行地理编码以显示,那么您可以使它更加通用.然后您可以将回调定义为codeAddress函数的参数:

function codeAddress( callback ) {
...
 geocoder.geocode( { 'address': address}, function(results, status) {
   ...
   callback( loc ); // instead of dispaly( loc );
   ...
 }
...
}

codeAddress( display ); // to execute geocoding
Run Code Online (Sandbox Code Playgroud)