javascript - AJAX 函数式 Javascript 练习

Question

这个问题已经有答案了:

getCurrentPosition() and watchPosition() are deprecated on insecure origins (11 个回答)

已关闭 7 年前。

我目前正在 freecodecamp.com 上做项目，以温习我的 JavaScript 技能，并且刚刚完成了一个天气预报小部件。它执行以下操作:

• 从 openweathermap.org 获取 api，并根据用户的经纬度显示天气
• 显示城市、天气描述和风速
• 可以在摄氏度和费伦海特之间切换

我想成为一名更好的 JavaScript 开发人员并使用最佳实践工具和设计模式。因此，我想请问是否有人有设计模式建议，可以使我的代码更高效、更少冗余、更实用。

此外，控制台显示 getCurrentPosition() and watchPosition() are deprecated on insecure origins为什么会这样？是否有其他方法可以直接从浏览器获取用户的位置？

以下是我的 JavaScript 代码:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {

    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=eee5ab7fffb62d126756d9b810ee1875", function(data) {

      var temp = JSON.stringify(data.main.temp);
      //Convert to Ferenheit
      var temp2 = temp * 9 / 5 - 459.67;
      //Round to 2nd decimal place
      var temp3 = Math.round(temp2 * 10) / 10;
      //Display
      $('#temperature').html(temp3 + " F");

      //Description
      var description = data.weather[0].description;

      //Wind speed
      var wind = JSON.stringify(data.wind.speed);

      //HTML disaply
      $(".report").html("<li>" + data.name + "</li>" + "<li>" + description + "</li><li>" + wind + " knots</li>");

      //Toggle Logic
      $('#celsius').on('click', function() {
        var celsius = temp - 273.15;
        var celsius2 = Math.round(celsius * 10) / 10;
        $('#temperature').html(celsius2 + " C");
        $('#celsius').removeClass('btn-default').addClass('btn-primary');
        $('#ferenheit').removeClass('btn-primary').addClass('btn-default');
      });

      $('#ferenheit').on('click', function() {
        var temp = JSON.stringify(data.main.temp);
        var temp2 = temp * 9 / 5 - 459.67;
        var temp3 = Math.round(temp2 * 10) / 10;
        $('#temperature').html(temp3 + " F");
        $('#ferenheit').removeClass('btn-default').addClass('btn-primary');
        $('#celsius').removeClass('btn-primary').addClass('btn-default');

      });

      //Icons logic
      if (description == "broken clouds" || "scattered clouds") {
        $("i").addClass("wi-cloudy");
      } else if (description == "few clouds") {
        $("i").addClass("wi-cloud");
      } else if (description == "clear sky") {
        $("i").addClass("wi-day-sunny");
      } else if (description == "shower rain" || "rain") {
        $("i").addClass("wi-rain");
      } else if (description == "thunderstorm") {
        $("i").addClass("wi-storm-showers");
      } else if (description == "snow") {
        $("i").addClass("wi-snowy");
      } else if (description == "mist") {
        $("i").addClass("wi-dust");
      };

    });

  });

}

您可以在要点 here 中找到我的其余代码.

再次感谢您，非常感谢您的反馈。

Answer 1

要在 Chrome 中工作，唯一的方法是从 HTTPS 运行页面。

参见https://github.com/stefanocudini/leaflet-gps/issues/15和 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

There are no firm plans at all at this time, other than eventual deprecation.