2011-03-09 11 views
15

Cuando uso el código debajo, ¿alerta un valor en blanco? ¿porqué es eso?¿Cómo devuelvo una longitud y una latitud del geocodificador JavaScript de Google Maps?

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> 

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); 
    } 

Respuesta

22

debido a que su función codeAddress se ejecuta, la asignación de matriz vacía a loc, al ejecutar la solicitud asíncrona a google geocodificador y devuelve loc, que está vacío, porque su verdadera el valor se asigna cuando llega la respuesta de google. En otras palabras, allert debe estar dentro del manejador de respuesta:

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(); 
    } 

así es como funciona ... AJAX proceso da lugar a los manipuladores de devolución de llamada.


si desea separar geocodificación y 'dispalying' puede ejecutar la función de visualización dentro del manejador:

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); 
    } 

html:

<input type="button" value="Encode" onclick="codeAddress()"> 


que puede hacer que sea aún más genérico , si geocodificas no solo para mostrar. A continuación, puede definir la devolución de llamada como parámetro a la función codeAddress:

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

codeAddress(display); // to execute geocoding 
+0

gracias por su respuesta, ¿hay alguna manera de devolver esos valores a una variable? bcos tengo la intención de usarlo en otra función como un parámetro – manraj82

+0

@ manraj82: compruébalo – Maxym

+0

esto todavía no resuelve el problema que tengo, estaba planeando obtener los valores de retorno para el código postal mutiple.basicamente estaba tratando de crear un genérico función donde puedo pasar un código postal como argumento y obtener los valores largos y lat a cambio. ya que esos valores están en la devolución de llamada supongo que no se puede devolver. – manraj82

Cuestiones relacionadas