Reading address from form and outputting longitude & latitude

问题

I'm quite new to JavaScript and am currently playing around with it and practicing trying to get a Google-geocoder function to print out the longitude and latitude in text fields. I'm sure the code I have contains errors etc. Anyhow, the JS code I have (GeoCoder.js) looks like this:

function codeAddress()
{
    var geocoder = new google.maps.Geocoder();
    var address  = document.getElementById("address").value;
    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();
            document.getElementById("latitude").value = latitude;
            document.getElementById("longitude").value = longitude;
        }
        else
        {
            alert("Geocode was not successful for the following reason: " + status);
        }
    }); 
}

I have also constructed a HTML file (Addresses.html), from which I expect to read an address and be able to output the longitude/latitude. My html file looks as follows:

<head>
    <script type="text/javascript" src="GeoCoder.js"></script>
</head>
<h2>Location</h2>
<form name="myform">
    <div>
        Address:<br>
        <input type="text" id="address" name="address">
        <input type="button" name="Click" id="firstButton" onclick="codeAddress()">
    </div>
    <div>
        Output:<br>
        <input type="text" id="longitude">
        <input type="text" id="latitude">
    </div>
</form>

I'm aware that what I have so far is incomplete, and does not function as it is supposed to. I'd like help with pointing out any errors, and in completing the task so that when I enter an address in the text field and push the button next to it, the longitude and latitude gets outputted in the output fields below the address.

回答1:

can you try this and tell me what is the result so that i can help you....

function codeAddress()
{
var geocoder = new google.maps.Geocoder();
var address  = document.getElementById("address").value;
alert("address : "+address);// should display text you entered in input field
geocoder.geocode( {'address': address}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK)
{ 
alert("entered if statement");// you have entered if statement
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
alert("latitude : "+latitude+" : longitude : "+longitude);// display values of latitude and longitude.
document.getElementById("latitude").value = latitude;
document.getElementById("longitude").value = longitude;
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
}); 
}

if you get all alert message except the last one with correct values and still not able to set the values in input field try this...

document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;

来源：https://stackoverflow.com/questions/37304295/reading-address-from-form-and-outputting-longitude-latitude

标签

javascript

html

forms

google-geocoder