地理位置渲染问题

Question

我想在用户每次点击时获取用户的地理位置。 这是代码

<script type="text/livescript">
  var x = document.getElementById("demo");
  function getLocation() {
      if (navigator.geolocation) {
          navigator.geolocation.watchPosition(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;
      var latitude = document.getElementById('latitude');
      var longitude = document.getElementById('longitude');
      latitude.value=position.coords.latitude;
      longitude.value=position.coords.longitude;
  }
  </script>

使用按钮调用

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times; 
</button>
    <h4 class="modal-title">Check IN Details</h4>
  </div>

当我第一次单击该按钮时，浏览器会询问允许位置弹出窗口并呈现纬度/经度，我将它们显示在文本框中。并且会在 URL 中生成一个位置图标，说明该网站正在使用该位置

当我再次单击按钮以获取它挂起的位置时，我的意思是我需要关闭浏览器并单击一个按钮来获取纬度/经度。

在第二种情况下，它无法获取位置。可能有一些刷新功能会清除最后的纬度/经度并根据地点获取新位置。

请帮帮我。

Answer 1

请看下面的代码，如果这是你需要的，我只是使用 getCurrentLocation 方法而不是 watchPosition 方法，因为每次设备位置发生变化时都会自动调用 watchPosition。由于您需要手动触发一个函数来获取当前位置，因此您应该使用 getCurrentLocation 方法，并传递一个具有 maximumAge: 0 的选项来获取新位置，否则将不使用缓存位置并尝试检索真实的当前位置。然后传递具有“Infinity”值的超时，这意味着 getCurrentPosition() 在位置可用之前不会返回。见https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions

<!DOCTYPE html>
    <html>
        <head></head>
        <body>
          <button onclick="getLocation()">Try It</button>

          <p id="demo"></p>
        </body>
    <script>

    var x = document.getElementById("demo");

    function getLocation() {
        var options = {maximumAge: 0, timeout: Infinity, enableHighAccuracy: true};

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, errorHandler, options);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        x.innerHTML = "Latitude: " + position.coords.latitude +
        "<br>Longitude: " + position.coords.longitude;
    }

    function errorHandler (err) {
      //TODO: Set your rules what will happen when error occured
      console.log(err);
    }
    </script>
    </html>