Блог

Главная - Вопросы по программированию - Как отобразить динамическое изображение на основе географического местоположения?

Как отобразить динамическое изображение на основе географического местоположения?

#javascript #ajax #api #geolocation

#javascript #ajax #API #геолокация

Вопрос:

Я пытаюсь отобразить конкретное изображение на основе страны, из которой пользователь посещает мой сайт. Мне удалось использовать ajax и https://geolocation-db.com/jsonp / для получения информации о местоположении.

Если я проверю это из США или любой другой страны, я смогу вывести эту страну (используя TunnelBear), но моя цель — отобразить другое изображение в зависимости от страны вывода.

Чего мне не хватает?

 //get ip, city, state amp; country
$.ajax({
    url: "https://geolocation-db.com/jsonp",
    jsonpCallback: "callback",
    dataType: "jsonp",
    success: function (location) {
        $("#country").html(location.country_name);
    },
});

let getCountry = location.country_name;

if (getCountry == 'United States') {
    bg.innerHTML = `<img src="https://via.placeholder.com/900x450?text=UNITED STATES">`;
} else if (getCountry == 'United Kingdom') {
    bg.innerHTML = `<img src="https://via.placeholder.com/900x450?text=UNITED KINGDOM">`;
} else {
    bg.innerHTML = `<h3>This is not working!</h3>`;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <div id="country"></div>
        <div id="bg"></div>

Комментарии:

1. Вы можете использовать switch case для разных стран, но это потребует много работы. Кстати, лучше использовать country_code при сравнении

2. код страны не является частью возвращаемых данных этого API. У вас есть другие рекомендации API?

3. Вы не можете получить location объект вне вызова ajax. Вам нужно записать последние блоки кода внутри success метода

Ответ №1:

Вам нужно проверить страну внутри метода успеха.

 //get ip, city, state amp; country
$.ajax({
    url: "https://geolocation-db.com/jsonp",
    jsonpCallback: "callback",
    dataType: "jsonp",
    success: function (location) {
      $("#country").html(location.country_name);
      let getCountry = location.country_name;

      if (getCountry == 'United States') {
          bg.innerHTML = `<img src="https://via.placeholder.com/900x450?text=UNITED STATES">`;
      } else if (getCountry == 'United Kingdom') {
          bg.innerHTML = `<img src="https://via.placeholder.com/900x450?text=UNITED KINGDOM">`;
      } else {
          bg.innerHTML = `<h3>This is not working!</h3>`;
      }
    },
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="country"></div>
<div id="bg"></div>

Метки: