Javascript 将街道地址转换为坐标并放置在html中_Javascript_Html_Coordinates_Street Address

Javascript 将街道地址转换为坐标并放置在html中

javascript html

Javascript 将街道地址转换为坐标并放置在html中,javascript,html,coordinates,street-address,Javascript,Html,Coordinates,Street Address,我有javascript将街道地址转换为坐标。但我想知道的是，当用户在输入字段中键入地址时，javascript将其转换为lat和lng，并将结果放在p div中，比如输入字段下面我的JS代码是 var latitude; var longitude; /* * Get the json file from Google Geo */ function Convert_LatLng_To_Address(address, callback) {

我有javascript将街道地址转换为坐标。但我想知道的是，当用户在输入字段中键入地址时，javascript将其转换为lat和lng，并将结果放在p div中，比如输入字段下面

我的JS代码是

    var latitude;
    var longitude;

    /*
    * Get the json file from Google Geo
    */
    function Convert_LatLng_To_Address(address, callback) {
            url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false";
            jQuery.getJSON(url, function (json) {
                Create_Address(json, callback);
            });        
    }

    /*
    * Create an address out of the json    
    */
    function Create_Address(json, callback) {
        if (!check_status(json)) // If the json file's status is not ok, then return
            return 0;
        latitude = json["results"][0]["geometry"]["location"]["lat"];
        longitude = json["results"][0]["geometry"]["location"]["lng"];
        callback();
    }

    /* 
    * Check if the json data from Google Geo is valid 
    */
    function check_status(json) {
        if (json["status"] == "OK") return true;
        return false;
    }
       <body>
        Address:
    <input type="text" id="address-input">
    City:
    <input type="text" id="city-input">
    Country:
    <input type="text" id="country-input">
    Postcode:
    <input type="text" id="address4">
    <input type="submit" id="submit" value="generate" onClick="AlertLatLng()">


    <p id="result"></p>




    <script>

var street_address = document.getElementById('address-input').value,
    city = document.getElementById('city-input').value,
    country = document.getElementById('country-input').value,
    postcode = document.getElementById('postcode-input').value;

var address = street_address + ' ' + city + ' ' + country + ', ' + postcode;

        // AlertLatLng is a callback function which will be executed after converting         address to coordinates
        Convert_LatLng_To_Address(address, AlertLatLng);     

        /*
        * Alert Latitude & Longitude
        */
        function AlertLatLng() {
    var result = "The latitude is " + latitude + " and longitude is " + longitude;
    document.getElementById('result').innerHTML=result;
}
</scrip>
  </body>

var纬度；
var经度；
/*
*从Google Geo获取json文件
*/
函数Convert_LatLng_To_Address（地址，回调）{
url=”http://maps.googleapis.com/maps/api/geocode/json?address=“+地址+”&sensor=false”；
getJSON（url，函数（json）{
创建_地址（json，回调）；
});        
}
/*
*从json中创建一个地址
*/
函数Create_Address（json，回调）{
if（！check_status（json））//如果json文件的状态不正常，则返回
返回0；
纬度=json[“结果”][0][“几何体”][“位置”][“纬度”]；
经度=json[“结果”][0][“几何体”][“位置”][“液化天然气”]；
回调（）；
}
/* 
*检查来自Google Geo的json数据是否有效
*/
函数检查_状态（json）{
if（json[“status”]=“OK”）返回true；
返回false；
}
地址:
城市：
国家：
邮政编码：

var street_address=document.getElementById（'address-input'）。值，
city=document.getElementById（'city-input'）。值，
country=document.getElementById（'country-input'）。值，
postcode=document.getElementById（'postcode-input'）。值；
var地址=街道地址+城市+国家+邮政编码；
//AlertLatLng是一个回调函数，将地址转换为坐标后执行
将地址转换为地址（地址，AlertLatling）；
/*
*警报经纬度
*/
函数AlertLatLng（）{
var result=“纬度为“+纬度+”，经度为“+经度；
document.getElementById（'result'）。innerHTML=result；
}

提前感谢：）

您可以使用JavaCScript设置DOM元素的内容

脚本：

function AlertLatLng() {
    var result = "The latitude is " + latitude + " and longitude is " + longitude;
    document.getElementById('result').innerHTML=result;
}

现在，这将把您的消息放入位于输入字段下方的

标记中

编辑：

要将信息从表单输入字段传递到javascript，需要获取输入字段的值（请参阅：）。简言之：

var address = "address+city+country,+postcode"

可以是：

var street_address = document.getElementById('address1').value,
    city = document.getElementById('address2').value,
    country = document.getElementById('address3').value,
    postcode = document.getElementById('address4').value;
var address =  street_address + ' ' + city + ' ' + country + ', ' + postcode;

建议您对输入标签使用更直观的

id

属性：

id=“city input”

、

id=“postcode input”

等。这可能会使您的代码更易于阅读

编辑2:

作为一个简短的补充说明..您在代码段底部的结束标记中拼错了脚本。您的浏览器很可能会纠正这一点，但可能值得注意

至于你问题的下一部分

在我看来，纬度和经度变量是在

Create_Address

中定义的，这是调用google maps api的

jQuery.getJSON

调用

Convert_LatLng_to_Address

中的回调函数

不幸的是，底部设置变量

address

的js代码在页面加载时只运行一次。这将导致所有变量都是空字符串或未定义的。您只需调用

Convert\u LatLng\u to\u Address（Address，AlertLatLng）

，这一切都很好，但您可能希望在表单中包含信息后立即执行此操作

表单上的提交操作在单击事件上调用

AlertLatLng（）

。可能应该调用GoogleMapsAPI，使用提交时输入字段中的信息进行新的调用，而不是只调用一次

我建议将所有代码包装成一个简单的函数

function getNewLatLng() {
    var street_address = document.getElementById('address-input').value,
    city = document.getElementById('city-input').value,
    country = document.getElementById('country-input').value,
    postcode = document.getElementById('postcode-input').value;

    var address = street_address + ' ' + city + ' ' + country + ', ' + postcode;

    // AlertLatLng is a callback function which will be executed after converting address to coordinates
    Convert_LatLng_To_Address(address, AlertLatLng);
}

然后编辑HTML以在提交时运行此功能：

<input type="submit" id="submit" value="generate" onClick="getNewLatLng()">

既然已经加载了jquery，您可以使用它：

function AlertLatLng() {
    $("p#result").text("The latitude is " + latitude + " and longitude is " + longitude);
}

作为旁注，您应该将纬度和经度变量传递给

Create_Address

中的callback（）

好的，我已经编辑了上面的代码，它将结果显示在p标记中。为了从用户键入的输入字段中获取信息，我必须在address变量中放置什么？这回答了您的问题吗？谢谢您的帮助。我修改了输入字段并添加了新的javascript。现在，当我单击“生成”按钮时，我得到了“纬度未定义，经度未定义”。我很确定这与head部分中的javascript有关。你觉得呢？我玩了一下代码，表单确实生成了一些坐标，但是，它显示了我在西班牙的位置（我住在英国）。所以我只是把代码改回上面的。这有帮助吗？