gpt4 book ai didi

javascript - 是否可以根据用户的地理位置替换网页中的图像?

转载 作者:行者123 更新时间:2023-11-28 19:21:45 26 4
gpt4 key购买 nike

我一直在 Google 上努力寻找相关信息,但一无所获。无论如何,我想要做的是根据用户位置更改图像源(img 标签或背景图像 css 属性)。

希望利用 HTML5 地理定位功能,然后运行条件语句,将其位置与多个设置位置(作为变量)进行比较。该函数找到用户最接近的设定位置,然后根据结果替换图像。我认为这可以通过 latLong 来完成 - 希望只是将数字与运算符函数进行比较。

我相当确定这可以通过 Jquery/Javascript 来完成 - 根据函数的结果将必要的 HTML/CSS 注入(inject)到页面中。只是我仍然沉浸在它之中。

之前是否有人做过或见过类似的事情,以便我可以查看代码的结构,以便验证我的假设? JS 不是我最大的优势,任何建议或帮助都会非常有帮助。

最佳答案

是的,这绝对是可能的。看看这个jsfiddle :

var body = document.body;

function locate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
if(position.coords.latitude > 50 && position.coords.longitude > 15) {
body.innerHTML = 'You might be in Europe';
console.log('You might be in Europe');
} else {
body.innerHTML = 'You are probably not in Europe';
console.log('You are probably not in Europe');
}
});
} else {
console.log(false);
}
};

locate();

当您运行上面的示例时,请确保在它询问您的位置时单击“允许”,并给它一点时间来找到您。

这只是一个俗气的例子,但正如你所看到的,它根据纬度和经度粗略地估计你的位置,并以语句的形式提供输出(但是,你可以轻松地将其设为图像的 URL 等) .)

以下是一些供您深入研究 API 的资源:

我给你的建议是开始谷歌搜索。有许多这样的实现。

编辑

还有一件事...要真正理解 API,我建议无限使用控制台。例如,您可以这样做:

navigator.geolocation.getCurrentPosition(function(position) {
console.log(position);
});

然后在您使用的任何浏览器中打开控制台,并检查该对象。

console log of geolocation object

关于javascript - 是否可以根据用户的地理位置替换网页中的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28732558/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com