从表格中读取地址并输出经度和纬度

时间:2016-05-18 15:40:01

标签: javascript html forms google-geocoder

我对JavaScript很陌生,现在正在玩它并尝试使用Google-geocoder功能打印文本字段中的经度和纬度。我确定我的代码包含错误等。无论如何,我拥有的JS代码(GeoCoder.js)看起来像这样:

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

我还构建了一个HTML文件(Addresses.html),我希望从中读取一个地址并输出经度/纬度。我的html文件如下所示:

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

我知道到目前为止我所拥有的内容是不完整的,并且不能正常运行。我希望帮助指出任何错误,并完成任务,以便当我在文本字段中输入地址并按下它旁边的按钮时,经度和纬度将在地址下方的输出字段中输出

1 个答案:

答案 0 :(得分:0)

你可以尝试一下,告诉我结果是什么,这样我才能帮助你......

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

如果您收到除最后一个正确值以外的所有警报消息但仍无法在输入字段中设置值,请尝试此...

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