0

我有 javascript 将街道地址转换为坐标。但我想要的是当用户在输入字段中输入地址时，javascript 将其转换为 lat 和 lng 并将结果放在 ap 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>

提前致谢 ：）

4

2 回答 2

0

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

Javascript：

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

现在，这会将您的消息放入<p id='result'>位于输入字段下方的标签中。

编辑：

要将信息从表单输入字段传递到 javascript，您需要获取输入字段的值（请参阅：将 HTML 表单数据传递给 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：

作为一个快速的旁注..您在代码片段底部的结束标记中拼写错误的脚本。您的浏览器很可能会更正此问题，但可能值得一试。

至于你问题的下一部分......

在我看来，纬度和经度变量是在 中定义的，这是调用谷歌地图 api 的调用Create_Address的回调函数。jQuery.getJSONConvert_LatLng_To_Address

不幸的是，您在底部设置变量的 js 代码address仅在页面加载时运行一次。这样做的结果将是所有变量都将是空字符串或未定义。您只需拨打一个电话就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()">
于 2013-09-27T17:20:03.587 回答
0

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

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

作为旁注，您应该将纬度和经度变量传递给您的 callback() in Create_Address。

于 2013-09-27T17:24:22.743 回答