在以下实例中，Geolocation API 用于检索用户的纬度和经度。如果成功，超链接将填如一个 openstreetmap.org URL，该 URL 将显示当前的的位置。 - 在线编辑器

Web 接口
Geolocation API - 允许用户根据需要向 Web 应用程序提供他们的位置
在以下实例中，Geolocation API 用于检索用户的纬度和经度。如果成功，超链接将填如一个 openstreetmap.org URL，该 URL 将显示当前的的位置。

          <style>
body {
  padding: 20px;
  background-color:#ffffc9
}

button {
  margin: .5rem 0;
}
</style>

<button id = "find-me">显示我的位置</button><br/>
<p id = "status"></p>
<a id = "map-link" target="_blank"></a>

<script>
function geoFindMe() {

  const status = document.querySelector('#status');
  const mapLink = document.querySelector('#map-link');

  mapLink.href = '';
  mapLink.textContent = '';

  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = '';
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `纬度：${latitude} °，经度：${longitude} °`;
  }

  function error() {
    status.textContent = '无法检索您的位置';
  }

  if(!navigator.geolocation) {
    status.textContent = '您的浏览器不支持地理定位';
  } else {
    status.textContent = '定位中…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

}

document.querySelector('#find-me').addEventListener('click', geoFindMe);
</script>

        