Fatal编程技术网
  • javascript/
  • Javascript 如何以html格式获取地理位置和返回值

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

javascript html forms geolocation

Javascript 如何以html格式获取地理位置和返回值,javascript,html,forms,geolocation,Javascript,Html,Forms,Geolocation,当我点击一个按钮时，如何获取地理位置并将其返回到表单中 因此，当单击地理位置时，获取我的位置，然后在from中返回输出，以便稍后使用它。 地理定位 <html> <body> <p>Click the button to get your coordinates.</p> <button onclick="getLocation()">Get geolocation and put into from</b

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

因此，当单击地理位置时，获取我的位置，然后在from中返回输出，以便稍后使用它。

地理定位

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


单击按钮获取您的坐标

获取地理位置并从


var x=document.getElementById（“演示”）；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}否则{
x、 innerHTML=“此浏览器不支持地理位置。”；
}
}
功能显示位置（位置）{
x、 innerHTML=“纬度：”+position.coords.Latitude+
“
经度：”+position.coords.Longitude；
}
我现在得到了工作代码。 


函数getLocationConstant（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（onGeoSuccess，onGeoError）；
}否则{
警报（“您的浏览器或设备不支持地理定位”）；
}
}
//如果我们有一个成功的位置更新
功能onGeoSuccess（事件）{
document.getElementById（“纬度”）.value=event.coords.Latitude；
document.getElementById（“经度”）.value=event.coords.Longitude；
document.getElementById（“位置1”）.value=event.coords.latitude+，“+event.coords.longitude；
}
//如果地理定位请求出现问题
函数onGeoError（事件）{
警报（“错误代码”+事件代码+”+事件消息）；
}
纬度：



经度：



位置
将其用于position.coords.latitude&position.coords.longitude而不是event.coords.latitude&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>


函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition，showError，{enableHighAccurance:true，timeout:60000，maximumAge:0}）；
}否则{
警报（“此浏览器不支持地理位置”）；
}
}
功能显示位置（位置）{
document.getElementById（“lat”）.value=position.coords.latitude；
document.getElementById（“long”）.value=position.coords.longitude；
document.getElementById（“latlong”）.value=position.coords.longitude+，“+position.coords.longitude；
}
功能错误（错误）{
开关（错误代码）{
案例错误。权限被拒绝：
x、 innerHTML=“用户拒绝了地理位置请求。”
打破
案例错误。位置不可用：
x、 innerHTML=“位置信息不可用。”
打破
大小写错误。超时：
x、 innerHTML=“获取用户位置的请求超时。”
打破
案例错误。未知错误：
x、 innerHTML=“发生未知错误。”
打破
}
}


纬度：



经度：



位置
geolocation我想在from position.coords.latitude+“，”+position.coords.longitude中这样返回；您的html中缺少
。除此之外，您在执行此代码时是否遇到任何错误？ctrl+c ctrl+v错误：）并且没有错误，然后您试图实现什么？问题是什么？坐标是不是没有显示出来？我复制了这个代码，并在单击按钮时显示坐标。 
    <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>