Введите местоположение с помощью API погоды Yahoo, используя simpleWeather.js?

Я создаю веб-страницу, которая показывает погоду. Я хотел бы, чтобы он мог использовать геолокацию, а также возможность вручную вводить местоположение для получения информации о погоде. У меня геолокация работает нормально, но я не знаю, как добавить дополнительный ввод, используя город или почтовый индекс.

Вот мой соответствующий код:

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 и jquery, поэтому я понимаю, как сделать поле ввода с помощью HTML, но не знаю, как использовать данные ввода пользователя, чтобы затем получить связанные данные о погоде.


javascript weather-api jquery yahoo-weather-api
person HCL    schedule 18.04.2017    source источник
comment
Можете ли вы опубликовать образец данных геолокации? То есть свойство geolocation navigator   -  person Tony M    schedule 19.04.2017
comment
Это глупо, но как мне это сделать?   -  person HCL    schedule 19.04.2017
comment
console.log(navigator.geolocation); должен записывать эти данные в консоль. Идея состоит в том, чтобы точно увидеть, какой это тип данных, чтобы вы знали, что запрашивать у пользователей (например) в поле ввода (или комбинации полей).   -  person Tony M    schedule 19.04.2017
comment
Кажется, это не сработало, когда я использовал console.log, но я попробовал document.write и получил это [геолокация объекта]   -  person HCL    schedule 19.04.2017

Ответы (1)


arrow_upward
0
arrow_downward

getCurrentPosition дает вам доступ к интерфейсу position, который затем дает вам координаты. Таким образом, ваш оператор if дает широту и долготу на основе геолокации устройства. Чтобы получить ту же информацию из ввода пользователя (широта и долгота), вам необходимо преобразовать ввод (может быть город, штат или полный адрес) в координаты. Я рекомендую использовать API карт Google для преобразования этого пользовательского ввода.

После преобразования вы можете передать широту и долготу в 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/< /а>

Я настоятельно рекомендую регистрировать переменные, чтобы вы могли сказать, какое время данных они содержат. В своей скрипке вы пытались получить доступ к свойству, которого нет в объекте. Ведение журнала, которое легко покажет вам, что использовать.

person Tony M    schedule 19.04.2017
comment
Хм, я пробовал это с Google Maps API, но кажется, что ничего не происходит, когда я вручную ввожу адрес... Не совсем уверен, что там происходит - person HCL; 19.04.2017
comment
Возвращает ли API координаты? Как минимум, я бы убедился, что это так. Скрипт, который у меня есть, работает: jsfiddle.net/7u539rfq/11 Обратите внимание, как значения добавляются к div - это координаты. Это значения, которые вы передаете своей функции loadWeather(arg1,arg2). Для тестирования я ввел Портленд, штат Орегон. - person Tony M; 19.04.2017
comment
Как ни странно, в console.log ничего не появляется, и я также пробовал document.write(), но ничего не анализируется. Я успешно попробовал это на вашей скрипке, поэтому понятия не имею, что может пойти не так с моей стороны: / - person HCL; 19.04.2017
comment
jsfiddle.net/mjsgwq55/2 обновил его. Вам не хватает нескольких вещей: библиотеки Jquery, определения $ и вам все еще не хватает Yahoo Weather API (по крайней мере, на скрипке), так что добавьте это. На данный момент вы получите сообщение об ошибке, что $.simpleWeather не определено, потому что это не так. Либо опубликуйте детали API Yahoo, либо просто используйте то, что находится в этой скрипке, должно работать. - person Tony M; 20.04.2017
comment
Я обновил свой ответ @HCL. Теперь скрипка работает (получила конечную точку API). Дайте мне знать, если это решит вашу проблему, и отметьте ответ, если он правильный, ура! - person Tony M; 20.04.2017
comment
Просто чтобы уточнить, WeatherText - это var, который соответствует массиву строк, которые появляются в div .weather-text, не уверен, что это актуально. Он все еще не обновляется, но работает на вашей скрипке. Я использую плагин simpleweather.js, как и вы, вероятно, уже сейчас, но я не уверен, что еще мне не хватает. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> <script src="https://maps.google.com/maps/api/js?sensor=false"></script> - person HCL; 20.04.2017
comment
Попробуйте эту ссылку для simpleWeather: cdnjs. cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/ Просто нажмите, чтобы открыть и скопировать URL-адрес. Убедитесь, что он действительно загружает минимизированный JS. Ваша ссылка не работает, потому что у вас есть пробелы между символами. Чтобы понять, что я имею в виду, скопируйте src simpleWeather из тега script (ссылка) и вставьте его в текстовый редактор. - person Tony M; 20.04.2017
comment
Я действительно надеялся, что это все. Но я думаю, что пробел появился, когда я вставил фрагмент кода выше. Вот мой репозиторий git, если это поможет — github.com/cuiiii/the-weather-in- слова Большое спасибо за то, что остались со мной в этом, я рвала на себе волосы!! - person HCL; 20.04.2017
comment
Обычно это мельчайшие детали. И не беспокойтесь, секундочку. - person Tony M; 20.04.2017
comment
Возникли некоторые проблемы с нажатием. В любом случае, проблема заключалась в том, что вы добавляли теги input и button в функцию simpleWeather. Когда запускается событие click, функция еще не была вызвана и кнопка не существует. Так что либо добавьте их на document.ready, либо просто поместите в index.html, как это сделал я. - person Tony M; 20.04.2017
comment
Оно работает! У меня он есть в document.ready, но он все еще загружается до погоды (function($){ $(document).ready(function(){ if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition(function(position) { loadWeather(position.coords.latitude + ',' + position.coords.longitude); }); $(".weather-input").html('<input id="address" type="text" placeholder="Enter City, State"/>'); $(".weather-input").append('<button type="submit">Submit</button>'); } else { $(".weather-text").html("Aw, geolocation isn't supported by this browser."); } - person HCL; 20.04.2017
comment
А, понятно. Всегда рекомендуется оставлять разметку в файле .html. Рад, что это работает :) Не стесняйтесь отмечать ответ как правильный (как есть :) - person Tony M; 20.04.2017