0

我正在使用以下代码来显示起始、当前位置的纬度和经度。

我需要将其转换为地址？使用 html5/js 代码可以吗？

以下是我的代码

HTML 

  <!DOCTYPE html>
<META HTTP-EQUIV="refresh" CONTENT="2">
<html>
    <head>
        <style>
            #tripmeter {
                border: 3px double black;
                padding: 10px;
                margin: 10px 0;
            }

            p {
                color: #222;
                font: 14px Arial;
            }

            span {
                color: #00C;
            }
            </style>
    </head>
    <body>
        <div id="tripmeter">
            <p>
            Starting Location (lat, lon):<br/>
            <span id="startLat">???</span>&deg;, <span id="startLon">???</span>&deg;
            </p>
            <p>
            Current Location (lat, lon):<br/>
            <span id="currentLat">???</span>&deg;, <span id="currentLon">???</span>&deg;
            </p>
            <p>
            Distance from starting location:<br/>
            <span id="distance">0</span> km
            </p>
        </div>
        <script>
            window.onload = function() {
                var startPos;

                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                                                             startPos = position;
                                                             document.getElementById("startLat").innerHTML = startPos.coords.latitude;
                                                             document.getElementById("startLon").innerHTML = startPos.coords.longitude;
                                                             }, function(error) {
                                                             alert("Error occurred. Error code: " + error.code);
                                                             // error.code can be:
                                                             //   0: unknown error
                                                             //   1: permission denied
                                                             //   2: position unavailable (error response from locaton provider)
                                                             //   3: timed out
                                                             });

                    navigator.geolocation.watchPosition(function(position) {
                                                        document.getElementById("currentLat").innerHTML = position.coords.latitude;
                                                        document.getElementById("currentLon").innerHTML = position.coords.longitude;
                                                        document.getElementById("distance").innerHTML =
                                                        calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                                                                          position.coords.latitude, position.coords.longitude);
                                                        });
                }
            };

            // Reused code - copyright Moveable Type Scripts - retrieved May 4, 2010.
            // http://www.movable-type.co.uk/scripts/latlong.html
            // Under Creative Commons License http://creativecommons.org/licenses/by/3.0/
            function calculateDistance(lat1, lon1, lat2, lon2) {
                var R = 6371; // km
                var dLat = (lat2-lat1).toRad();
                var dLon = (lon2-lon1).toRad();
                var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
                Math.sin(dLon/2) * Math.sin(dLon/2);
                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
                var d = R * c;
                return d;
            }
            Number.prototype.toRad = function() {
                return this * Math.PI / 180;
            }
            </script>
    </body>
</html>

JS代码

    window.onload = function() {
    var startPos;

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
                                                 startPos = position;
                                                 document.getElementById("startLat").innerHTML = startPos.coords.latitude;
                                                 document.getElementById("startLon").innerHTML = startPos.coords.longitude;
                                                 }, function(error) {
                                                 alert("Error occurred. Error code: " + error.code);
                                                 // error.code can be:
                                                 //   0: unknown error
                                                 //   1: permission denied
                                                 //   2: position unavailable (error response from locaton provider)
                                                 //   3: timed out
                                                 });

        navigator.geolocation.watchPosition(function(position) {
                                            document.getElementById("currentLat").innerHTML = position.coords.latitude;
                                            document.getElementById("currentLon").innerHTML = position.coords.longitude;
                                            document.getElementById("distance").innerHTML =
                                            calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                                                              position.coords.latitude, position.coords.longitude);
                                            });
    }
};


function calculateDistance(lat1, lon1, lat2, lon2) {
    var R = 6371; // km
    var dLat = (lat2-lat1).toRad();
    var dLon = (lon2-lon1).toRad();
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
    Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;
    return d;
}
Number.prototype.toRad = function() {
    return this * Math.PI / 180;
}

CSS

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#E4E4E4;
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );
    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    width:100%;
}

/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

#tripmeter {
    border: 3px double black;
    padding: 10px;
    margin: 10px 0;
}

p {
    color: #222;
    font: 14px Arial;
}

span {
    color: #00C;
}
4

0 回答 0