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

Question

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

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

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

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

Answer 1

是的，这绝对是可能的。看看这个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 的资源:

• Dive Into HTML5 Geolocation

• MDN (how to use the geolocation object)

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

编辑

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

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

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