如何自动执行基于 Json 的地理定位

Question

我是初学者，我有一个功能可以根据您的位置获取 link。

函数如下：

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

    <script>
    var x = document.getElementById("demo");

    function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
      }
     
      function showPosition(position) {
       x.innerHTML =  "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" +
        position.coords.longitude + "&units=metric&APPID=3d1523ca3f27251ddf055b1b26ed347f"
      }
       

    </script>

现在我正在尝试将此 link 变成 get.Json，这样网站将自动获取有关您所在地区天气的信息。问题是我无法让它工作。谁能帮我把 link 自动变成 get.Json。

Answer 1

要从某些 Web api 端点获取数据，您需要使用某些 ajax 请求 api。原生的是XMLHTTPRequest, fetch()。

还有jQuery.ajax及其别名$.post、$.get、$.getJSON等

因此，只需使用您熟悉的 api 并将其添加到您的 showPosition 函数中。当相应的 api 的承诺或事件回调被触发时，使用传递的数据显示您的信息：

function showPosition(position) {
  let apiUrl = "http://api.openweathermap.org/data/2.5/weather?lat=" + 
               position.coords.latitude + 
               "&lon=" + position.coords.longitude + 
               "&units=metric&APPID=3d1523ca3f27251ddf055b1b26ed347f";

  //using fetch() api
  fetch(apiUrl).then(response=>response.json()).then(data=>{
    //use the returned data however you like
    //for instance show temperature
    x.innerHTML = data.main.temp;
  });

  //using XMLHttpRequest
  let req = new XMLHttpRequest();
  req.open("get",apiUrl);
  req.addEventListener('load',function(data){
    //use the returned data however you like
  });

  //using a library like jQuery
  jQuery.getJSON(apiUrl).then(function(data){
    //use the returned data however you like
  });
}

阅读有关异步操作的内容并避免此类陷阱：

How do I return the response from an asynchronous call?

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

如何自动执行基于 Json 的地理定位

how to automate a geolocation based Json

html

javascript

json

geolocation

openweathermap