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

【问题标题】：Convert street address to coordinates and place in html将街道地址转换为坐标并放置在 html 中
【发布时间】：2013-09-27 17:10:08
【问题描述】：

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

提前致谢:)

【问题讨论】：

标签： javascript html coordinates street-address

【解决方案1】：

因为你已经加载了 jquery，你可以使用它：

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

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

【讨论】：

【解决方案2】：

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

JavaScript：

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：

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

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

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

不幸的是，您在底部设置变量 address 的 js 代码仅在页面加载时运行一次。这样做的结果将是所有变量都将是空字符串或未定义。您只需拨打Convert_LatLng_To_Address(address, AlertLatLng) 的电话，这一切都很好，但您可能希望在您获得表单中的信息后进行此操作。

表单上的提交操作在点击事件上调用AlertLatLng()。可能应该调用以使用提交时输入字段中的信息对 google maps 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()">

【讨论】：

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