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

Convert street address to coordinates and place in html

本文关键字：html 坐标 街道 地址 转换      更新时间：2023-09-26

我有javascript将街道地址转换为坐标。但我想要的是，当用户在输入字段中输入地址时，javascript 将其转换为 lat 和 lng，并将结果放在 pdiv 中，例如在输入字段下方。

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

提前致谢:)

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

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

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

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

贾夫文：

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：

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

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

在我看来，纬度和经度变量是在 Create_Address 中定义的，这是 Convert_LatLng_To_Address 中jQuery.getJSON调用的回调函数，它调用谷歌地图 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()">
相关文章：