Javascript LAT和LNG未在HTML输入表单上显示

我使用以下代码获取我当前位置的LAT和LNG，以在输入表单中显示，但由于某些原因，它不会按需要显示我的LAT和LNG，而是会在一瞬间显示LAT和LNG并消失。我试图更改我的浏览器权限以允许定位，但仍然在一瞬间显示并消失。有人能帮忙吗？下面是我的代码：

<form>  

<button onclick="onFormSubmit()">GET CURRENT LOCATION</button>



<script type="text/javascript">
function onGeoSuccess (position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;

        // NEXT 2 LINES WILL SET VALUE OF RESPECTIVE INPUTS
        document.getElementById('lat').value = lat;
        document.getElementById('lng').value = lng;

        // MAKE API CALL HERE, OR ANY OTHER NEXT STEPS
    }

    function onGeoError (err) {
        console.error("Error while trying to get position", err);
    }

    function onFormSubmit () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
        } else {
            alert('GeoLocation not supported or not allowed');
        }
    }</script>

              <div class="form-group">
                <input type="text" name="lat" class="form-control" id="lat" placeholder="Your Latitude" data-msg="Please enter your latitude">
                <div class="validate"></div>
              </div>

<div class="form-group">
                <input type="text" name="lng" class="form-control" id="lng" placeholder="Your Longitude" data-msg="Please enter your Longitude">
                <div class="validate"></div>
              </div>

              <div class="form-group">
                <input type="text" name="subject" class="form-control" id="contact-subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject">
                <div class="validate"></div>
              </div>


</form>

获取当前位置
功能onGeoSuccess（位置）{
var lat=位置坐标纬度；
var lng=位置坐标经度；
//接下来的两行将设置各自输入的值
document.getElementById（'lat'）。value=lat；
document.getElementById（'lng'）。value=lng；
//在此处进行API调用，或执行任何其他后续步骤
}
函数onGeoError（err）{
console.error（“尝试获取位置时出错”，err）；
}
函数onFormSubmit（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（onGeoSuccess，onGeoError）；
}否则{
警报（“不支持或不允许地理位置”）；
}
}

---

我只想在输入表单上用每个ID显示LAT和LNG，但我不知道我做错了什么。它没有按需要显示。

因此我追溯我的代码并排除错误，发现这仅仅是因为我使用了

获取当前位置

而不是

获取当前位置

。当我在

onclick

上调用

onFormSubmit

时，由于某种原因，它会在一瞬间出现并消失，但当我在

onclick

上调用

return onFormSubmit（）

时，一切都很正常。

由于坐标在一瞬间显示，听起来好像调用了成功回调。您的控制台中是否收到任何错误消息？没有错误，这可能是由于我的网站模板造成的吗？不知道。当您在

onGeoSuccess

回调中记录

position

的第一件事时，它会打印什么？是的，我尝试将“onFormSubmit”添加到，它可以工作，但我不希望它在不单击“获取当前位置”的情况下加载当前位置

position

打印什么？好的，但这并不能解释根本问题。为什么当其他人在不同的时间调用

onFormSubmit

时，lat和lng会突然显示？您有更好的解决方案吗？我对一个更好的解决方案持开放态度，不知道它为什么会出现和显示。当我创建一个没有CSS的简单HTML页面时，它工作得非常好，但当我添加CSS、Javascript和其他内容时，它就消失了。如果不先了解问题，就很难提出解决方案。你的CSS是什么？你有没有把它缩小到导致这个问题的CSS语句？我应该看CSS的哪一部分？我应该把我的CSS粘贴到这里吗？是的，把它粘贴到这里，然后开始对它进行二进制搜索：删除一半的CSS代码，看看你是否还能重现错误。如果没有，检查另一半。如果是，再减半。等等直到找到导致问题的线路。