javascript - 变量未填充所需值

标签 javascript jquery

我正在尝试制作一个“cuent 天气应用程序”。 为此,在我的 jQuery 代码片段中,我使用了两个名为“纬度”和“经度”的变量。 当我分别用当前位置的纬度和经度填充它们时,它的发生非常有效,正如我的警报弹出窗口(“if”语句内的那个)所反射(reflect)的那样。 但是,在此“if”语句之外,变量不再保留其值,如第二个警报弹出窗口所示。

<script>
$(document).ready(function(){
  var latitude = "";
  var longitude = "";
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      //alert(position.coords.latitude + " " + position.coords.longitude);
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
    });
  }
  alert(latitude + " " + longitude);
});
</script>
body {
  background-color : black;
}

.jumbotron {
  background-color : black;
  color : white;
}
<html>
<body>
  <div class="container-fluid" id="main-div">
    <div class="jumbotron text-center" id="heading-div">
      <h1 id="heading">Current Weather</hi>
    </div>
    <div class="row" id="weather-row">
      <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6 col-xs-offset-2 col-xs-8" id="weather-column">
        <div class="row" id="location-row">
          <div class="col-md-12 col-sm-12 col-xs-12" id="location-column">
          </div>
        </div>
        <div class="row" id="region-row">
          <div class="col-md-12 col-sm-12 col-xs-12" id="region-column">
          </div>
        </div>
        <div class="row" id="icon-row">
          <div class="col-md-12 col-sm-12 col-xs-12" id="icon-column">
          </div>
        </div>
        <div class="row" id="summary-row">
          <div class="col-md-12 col-sm-12 col-xs-12" id="summary-column">
          </div>
        </div>
        <div class="row" id="temp-row">
          <div class="col-md-12 col-sm-12 col-xs-12" id="temp-column">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

以下是我的代码..

https://codepen.io/iamrkcheers/pen/KqxyVZ

感谢任何帮助。谢谢。

最佳答案

您的警报范围错误。

if(navigator.geolocation){

    //navigator.geolocation.getCurrentPosition is an asynchronous function
    //we do not know when it will be done 
    //but we can tell it what do do when it finished. 
    //this is why we pass it a function as parameter 

    navigator.geolocation.getCurrentPosition(
      //this here is your callback function : 
      function(position){
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
        alert(latitude + " " + longitude); // only here do we know what latitude and longitude are.
      }
    );

    //since we are not going to synchronously wait until the getCurrentPosition finishes
    //any statement at this point gets executed immediately.
    alert("hey!");
}

如果您要运行此代码,hey 警报可能会首先弹出,然后是带有坐标的警报。

关于javascript - 变量未填充所需值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44970390/

相关文章:

javascript - 双击空白处,如何防止不被选中?

javascript - 如何停止运行此 setTimeout 函数?

jquery - 在 Rails 中使用 Ajax/jQuery 删除行,有些东西不起作用

javascript - 用于 JQuery 或其他 JavaScript 框架的所见即所得 GUI 生成器 (IDE)?

javascript - 如何在 Ext JS 中设置 RadioGroup setValue() 函数?

javascript - 如何在 Accordion 的容器内添加滚动条?

javascript - 单击另一个链接后删除链接组的类别

javascript - Meteor 从助手中返回一个新的 dom 元素

无法访问 Javascript 变量

javascript - 使用 lodash 从字符串数组中查找子字符串