无法从函数返回变量

Question

这是来自一个教程，所以在这件事上看我是菜鸟。

无法从函数返回值。必须是盲目的！
我一直在undefined！这是为什么？如果我在函数内部登录它会返回值。我把变量放在全局上。

以下是代码：

var latitude = 0;
var longitude = 0;

function getPosition() {
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(function (position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
      // console.log(latitude);
    })
    return latitude;
  } else {
    alert("Can't retrieve your location. Please enable it in your browser")
  }
}


$(document).ready(function () {
  var x = getPosition()
  $('body').click(function () {
    alert(x);
  });
});

body {
  font-family: helvetica, sans-serif;
  background-color: black;
  color: white;
  text-align: center;
}

footer p {
  font-size: 14px;
}

section p {
}

#header {
  font-size: 66px;
}

#header-1 {
  margin-bottom: 10px;
}

#header-2 {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <header id="header">
      <p id="header-1">XPTO</p>
      <p id="header-2">Weather App</p>
    </header>
    <section>
      <p id="location"></p>
      <p id="temperature"></p>
    </section>
    <div class="footer">
      <footer>
        <p> Inspired by me</p>
      </footer>
    </div>
  </div>