如何根据地理位置显示动态图像?
Posted
技术标签:
【中文标题】如何根据地理位置显示动态图像?【英文标题】:How to display a dynamic image based on geo location? 【发布时间】:2021-01-27 04:28:08 【问题描述】:我正在尝试根据用户访问我网站的国家/地区显示特定图片。我已经设法使用 ajax 和 https://geolocation-db.com/jsonp/ 来捕获位置信息。
如果我从美国或任何其他国家/地区检查此内容,我可以输出该国家/地区(使用 TunnelBear),但我的目标是根据输出国家/地区显示不同的图像。
我错过了什么?
//get ip, city, state & 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>
【问题讨论】:
您可以为不同的国家/地区使用开关盒,但这将是很多工作。顺便说一句,比较时最好使用country_code
country_code 不是此 API 返回数据的一部分。您还有其他 API 建议吗?
您无法在 ajax 调用之外获取 location
对象。您需要在success
方法中编写最后的代码块
【参考方案1】:
需要在success方法里面勾选国家。
//get ip, city, state & 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>
【讨论】:
以上是关于如何根据地理位置显示动态图像?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 java 中创建一些东西来根据纵横比调整图像的大小和位置? [关闭]