Question

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

提前致谢：）

Answer 1

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

Javscript：

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

现在，您的邮件会显示在输入字段下方的<p id='result'>标记中。

修改

要将表单输入字段中的信息传递给javascript，您需要获取输入字段的值（请参阅：Passing HTML Form Data to Javascript Function）。简而言之：

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中定义了纬度和经度变量，这是jQuery.getJSON中Convert_LatLng_To_Address调用的回调函数，调用google地图api 。

不幸的是，设置变量address的底部的js代码仅在页面加载时运行一次。结果将是所有变量都是空字符串或未定义。你只需拨打Convert_LatLng_To_Address(address, AlertLatLng)一次，这一切都很好，但是你可能希望在表格中有信息后再发生这种情况。

表单上的提交操作会在点击事件上调用AlertLatLng()。可能应该打电话给谷歌地图api一个新的调用，其中包含提交时输入字段中的信息而不是一次。

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

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()">

Answer 2

由于你已经加载了jquery，你可以使用它：

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

作为旁注，您应该将纬度和经度变量传递给Create_Address中的回调（）。

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

2 个答案: