Как вы используете JavaScript, чтобы получить текущий город, в котором находится пользователь, и отобразить его в ‹h2›?

$(document).ready(function(){
    $("#getLocation").on("click", function(){
        $.getJSON('https://geoip-db.com/json/geoip.php?jsonp=?') 
        .done (function(location) {
            $('#city').html(location.city);             
        });
    });
});

Это текущий JavaScript, который я использовал, и здесь ссылка на CodePen, для которого я его использую. Я также использую местоположение города пользователей, чтобы узнать погоду в этом городе.

Я читал на нескольких сайтах о том, как использовать несколько разных API для определения местоположения города пользователей, но в моем проекте это не сработало. Спасибо за помощь в продвижении.


javascript api jquery weather city
person Aaron Peck    schedule 22.03.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Чтобы уточнить мой предыдущий ответ, более чистый и более ванильный способ JavaScript для получения координат выглядит так.

Это всего на несколько коротких строк длиннее, а преимущества огромны:

  1. Не нужно включать библиотеку jQuery, которая является массивной и замедляет время загрузки страницы.
  2. Это означает, что вам не придется полагаться на ТЯЖЕЛЫЙ ВНЕШНИЙ API для выполнения вызовов AJAX для тех же данных (и другой бесполезной информации, относящейся к API, например, requestID), и вы значительно упростите свое приложение.
  3. Избегает использования многих обратных вызовов и, таким образом, избегает ада обратных вызовов.

Смотрите изображение ниже для результатов. Супер легкий и быстрый. Для получения более подробной информации см. MDN — Использование геолокации.

if ("geolocation" in navigator) {
    // Do something with coordinates returned
    function processCoords(position) {
        let latitude = position.coords.latitude;
        let longitude = position.coords.longitude;
        let first_div = document.querySelector('div');
        let el_h2 = document.createElement('h2');

        // Set h2 text as coordinates
        el_h2.innerText = `Latitude: ${latitude}, Longitude: ${longitude}`;

        // Append h2 to document
        first_div.appendChild(el_h2);
    }

    // Fetch Coordinates
    navigator.geolocation.getCurrentPosition(processCoords);
}

Чтобы получить город:

Обычно рекомендуется хранить координаты только в вашей базе данных, а затем при необходимости делать отдельные запросы городов. Это упрощает работу, когда вы хотите реализовать, скажем, представление карты на мобильном или настольном компьютере, где все используют координаты, а не имена для графиков.

Вы можете использовать API Карт Google и напрямую передавать данные LatLong. Кто-то создал суть того, как это сделать здесь.

Преимущество использования GMaps вместо Geo-IP:

  1. Google Maps API очень сильно оптимизирован. От более быстрых серверов к лучше написанному коду. Вы также можете импортировать определенную часть API GMaps, чтобы сократить размер исходного кода. Все это способствует гораздо более быстрому опыту.
  2. Можно предположить, что GMaps существует дольше, чем сторонний сайт, такой как Geo-IP.

введите описание изображения здесь

person Clement    schedule 22.03.2017
comment
попробую и так! Спасибо чувак. - person Aaron Peck; 23.03.2017
comment
Нп. Удачи в ваших проектах! - person Clement; 23.03.2017
comment
Проблема в том, что я хочу отображать не только координаты, но и фактический город координат. Предложения? - person Aaron Peck; 23.03.2017
comment
Если вы нашли это полезным, не могли бы вы отметить это как ответ и проголосовать? Был бы очень признателен :) - person Clement; 23.03.2017