Question

当我点击按钮时，如何获取地理位置并将其返回到表单中。

因此，当点击Geolocation获取我的位置然后返回from中的输出时，我可以稍后使用它。 http://jsfiddle.net/Mikki10/as3mg177/1/

地理位置

<html>   
<body>
    <p>Click the button to get your coordinates.</p>
    <button onclick="getLocation()">Get geolocation and put into from</button>
    <p id="demo"></p>
    <script>
        var x = document.getElementById("demo");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) {
            x.innerHTML = "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
        }
    </script>
    <form action="geo/ruteplanlag.php" method="get">
        <input style="width: 98%; margin: 20px auto; text-align: center;" name="startadr" type="text" value="(Custom value like Orlando or geolocation) " />
        <input style="width: 98%; margin: 20px auto; text-align: center;" name="slutadr" type="text" value="Miami" />
        <div class="buttonHolder">
            <input type="submit" value="Start ruteplanlægning">
        </div>
    </form>
</body>
</html>

Answer 1

我现在有了工作代码。 http://jsfiddle.net/Mikki10/gs5ed5sc/1/

    <script type="text/javascript">
    function getLocationConstant() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
        } else {
            alert("Your browser or device doesn't support Geolocation");
        }
    }

    // If we have a successful location update
    function onGeoSuccess(event) {
        document.getElementById("Latitude").value = event.coords.latitude;
        document.getElementById("Longitude").value = event.coords.longitude;
        document.getElementById("Position1").value = event.coords.latitude + ", " + event.coords.longitude;

    }

    // If something has gone wrong with the geolocation request
    function onGeoError(event) {
        alert("Error code " + event.code + ". " + event.message);
    }
</script>
<form action="geo/ruteplanlag.php" method="get">
    <div id="divSample" class="hideClass">Latitude:
        <input type="text" id="Latitude" name="Latitude" value="">
        <br>
        <br>Longitude:
        <input type="text" id="Longitude" name="Longitude" value="">
        <br>
    </div>
    <br>Position
    <input type="text" id="Position1" name="Position1" value="Miami">
    <br>
    <br>
    <input type="button" value="Get Location" onclick="getLocationConstant()" />
    <br>
    <br>
    <input type="submit" value="Add GPS Location" class=small>
</form>

Answer 2

将此用于position.coords.latitude＆amp; position.coords.longitude not event.coords.latitude＆amp; event.coords.longitude，因为它与移动设备上的大多数浏览器兼容，用于地理定位。

    <script type="text/javascript">
    function getLocation() {
             if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError,{enableHighAccuracy: true,timeout: 60000,maximumAge: 0});
            } else { 
               alert("Geolocation is not supported by this browser.");
            }
}

        function showPosition(position) {


        document.getElementById("lat").value = position.coords.latitude;
        document.getElementById("long").value = position.coords.longitude;
        document.getElementById("latlong").value = position.coords.longitude +", "+ position.coords.longitude;
                   }

            function showError(error) {
                switch(error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "Location information is unavailable."
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "The request to get user location timed out."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "An unknown error occurred."


                break;
                }
            }
        </script>
    <form action="geo/ruteplanlag.php" method="get">
    <br>
    Latitude:
    <input type="text" id="Lat" name="Latitude" value="">
    <br>
    <br>Longitude:
    <input type="text" id="Long" name="Longitude" value="">
    <br>
    </div>
    <br>Position
    <input type="text" id="latlong" name="latlong" value="Miami">
    <br>
    <br>
    <input type="button" value="Get Location" onclick="getLocation()" />
    <br>
    <br>
    <input type="submit" value="Add GPS">
</form>

如何以html格式获取地理位置和返回值

2 个答案: