Question

我正在建立一个显示天气的网页。我希望它能够使用地理定位，以及手动输入位置来提取天气信息的选项。我的地理定位工作正常，但我不确定如何使用城市或邮政编码添加额外的输入。

这是我的相关代码：

if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(function(position) {
        loadWeather(position.coords.latitude + ',' + position.coords.longitude);
    });
} else {
    loadWeather("", "1062617");
}

function loadWeather(location, woeid) {
    $.simpleWeather({
        location: location,
        woeid: woeid,
        unit: 'f',
        success: function(weather) {
          $(".weather-text").html(weatherText[weather.code]);
          $(".weather-icon").html('<i class="icon-' + weather.code + '"></i>');
      $(".weather-stats").html('<ul><li><strong>'+weather.city+', ' +weather.region+ '</strong></li>');
      $(".weather-stats").append('<li>'+ weather.temp + '&deg;F / '+ weather.alt.temp +'&deg;C</li></ul>');
    },
    error: function(error) {
        $("#weather").html('<p>' + error + '</p>');
    }
  });
}

我对javascript＆amp; jquery，所以我理解如何使用HTML创建一个输入框但不确定如何使用用户输入数据然后检索相关的天气数据。

Answer 1

getCurrentPosition可让您访问position界面，然后为您提供坐标。因此，您的if语句会根据设备的地理位置生成纬度和经度。为了从用户的输入（纬度和经度）获得相同的信息，您需要将输入（可以是城市，州或完整地址）转换为坐标。我建议使用Google maps API转换该用户输入。

转换后，您可以将lat和long传递给loadWeather()。以下是用户输入（地址）转换的示例：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var geocoder = new google.maps.Geocoder();
var address = jQuery('#address').val();

geocoder.geocode( { 'address': address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    jQuery('#coordinates').val(latitude+', '+longitude);
 loadWeather(latitude + ',' + longitude);
    } 
}); 
</script>

<input id="address" type="text" placeholder="Enter City, State"/>

当然，您可以在适当的上下文中使用上述内容，例如检查地理位置是先工作还是用户实际输入地址。您可能需要一个易于获取的Google Maps API。

试一试，如果卡住了，请查看这个小提琴：jsfiddle

修改

我抓住了Yahoo的Weather API端点，这里正在努力工作： https://jsfiddle.net/mjsgwq55/3/

我强烈建议记录变量，以便了解它们包含的数据时间。在你的小提琴中，你试图访问对象中不存在的属性。记录可以轻松显示您要使用的内容。

使用simpleWeather.js输入Yahoo的天气API的位置？

1 个答案: