以纬度和经度为变量的地理位置

Question

如果可以的话，感谢您抽出时间提供帮助！

我正在构建一个天气应用程序，并且我正在处理一个页面，该页面需要经常通过用户手机更新纬度和经度。

我意识到有两种方法可以做到这一点......

1. getCurrentPosition()
2. watchPosition()

我不确定如何将纬度/经度输入到请求中

这是我正在使用的代码

<link rel="stylesheet" href="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.css">
<script src="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.js"></script>

<!--// target DOM element where WeatherBlox will be rendered //-->
<div id="wxblox" class="aeris-wrapper"></div>

<script> 

// set Aeris account access keys
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
aeris.on('ready', () => {

    // create desired WeatherBlox instance
    var view = new aeris.wxblox.layouts.local.Main('#wxblox', {
        obs: {
            advisories: {
                enabled: true
            },
            threats: {
                enabled: true
            }
        },
        nearby: {
            request: {
                limit: 4
            }
        },
        shortterm: {
            request: {
                limit: 3
            }
        },
        forecast: {
            type: "detailed"
        },
        maps: {
            animation: {
                enabled: true,
                autoplay: false,
                alwaysShowPast: false,
                alwaysShowFuture: false,
                from: -2,
                to: 0,
                duration: 2,
                endDelay: 1,
                intervals: 10
            },
            controls: {
                layers: [
                    {
                        value: "radar",
                        title: "Radar"
                    },{
                        value: "satellite",
                        title: "Satellite"
                    },{
                        value: "alerts",
                        title: "Advisories"
                    },{
                        value: "temperatures,clip-us-flat",
                        title: "Temps"
                    }
                ],
                regions: [
                    {
                        zoom: 7,
                        title: "Local"
                    },{
                        zoom: 5,
                        title: "Regional"
                    }
                ]
            }
        }
    });

    // load data and render the view for a specific location
    view.load({
        p: "Latitude, Longitude"
    });
    
});

</script>

在底部显示 p:"Latitude, Longitude" 是我需要将这些地理定位方法的结果作为变量放置的位置。也许更清楚应该是“用户纬度，用户经度”

用户打开应用程序，这是他们将看到的第一页。这是一个本地天气状况页面，它从离用户最近的天气观测点获取数据。

如果我必须在这两种方法之间进行选择，我可能更喜欢 watchPosition，因为它会在用户移动时跟上用户的位置。

感谢您提供的任何帮助

此致，

贾斯汀

Answer 1

在getCurrentPosition()的成功回调中调用view.load()。

// load data and render the view for a specific location
Geolocation.getCurrentPosition(pos => {
    console.log(`Showing weather for lat ${pos.coords.latitude}, long ${pos.coords.longitude}`);
    view.load({p: `${pos.coords.latitude}, ${pos.coords.longitude}`});
}, err => console.log(`Geolocation error: ${err.message}`));

完整代码：

// set Aeris account access keys
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
aeris.on('ready', () => {

  // create desired WeatherBlox instance
  var view = new aeris.wxblox.layouts.local.Main('#wxblox', {
    obs: {
      advisories: {
        enabled: true
      },
      threats: {
        enabled: true
      }
    },
    nearby: {
      request: {
        limit: 4
      }
    },
    shortterm: {
      request: {
        limit: 3
      }
    },
    forecast: {
      type: "detailed"
    },
    maps: {
      animation: {
        enabled: true,
        autoplay: false,
        alwaysShowPast: false,
        alwaysShowFuture: false,
        from: -2,
        to: 0,
        duration: 2,
        endDelay: 1,
        intervals: 10
      },
      controls: {
        layers: [{
          value: "radar",
          title: "Radar"
        }, {
          value: "satellite",
          title: "Satellite"
        }, {
          value: "alerts",
          title: "Advisories"
        }, {
          value: "temperatures,clip-us-flat",
          title: "Temps"
        }],
        regions: [{
          zoom: 7,
          title: "Local"
        }, {
          zoom: 5,
          title: "Regional"
        }]
      }
    }
  });

  console.log("Getting Geolocation");
  // load data and render the view for a specific location
  Geolocation.getCurrentPosition(pos => {
    console.log(`Showing weather for lat ${pos.coords.latitude}, long ${pos.coords.longitude}`);
    view.load({
      p: `${pos.coords.latitude}, ${pos.coords.longitude}`
    });
  }, err => console.log(`Geolocation error: ${err.message}`));

});