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

Question

我一直在 Google 上努力寻找这方面的一些信息，但我还没有找到任何信息。无论如何，我想做的是根据用户位置更改图像源（img 标签或背景图像 css 属性）。

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

我相当确定这将通过 Jquery/Javascript 完成 - 根据函数的结果将必要的 HTML/CSS 注入页面。只是仍然围绕着它。

有没有人以前做过或看过类似的东西，这样我就可以查看代码的结构，从而验证我的假设？ JS 不是我最大的强项，任何建议或帮助都是最有帮助的。

Answer 1

这可以使用 Google 的地理编码 API (https://developers.google.com/maps/documentation/business/geolocation/) or the HTML5 geolocation functionality (http://diveintohtml5.info/geolocation.html)

navigator.geolocation.getCurrentPosition(function(data) {
  // data.coords.latitude & data.coords.longitude
});

Answer 2

是的，这绝对有可能。看看这个 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);
});

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

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

Is it possible to replace an image in a web page based on the user's geolocation?

javascript

jquery

geolocation

编辑