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

Posted 2023-02-23

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

【英文标题】：Is it possible to replace an image in a web page based on the user's geolocation?

【发布时间】：2015-02-26 00:46:42

【问题描述】：

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

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

我很确定这将通过 Jquery/javascript 来完成 - 根据函数的结果将必要的 HTML/CSS 注入页面。只是我的头还在绕着它。

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

【问题讨论】：

在高层次上，您基本上可以将其分解为更小的功能块。部分可能包括：1）一般使用 HTML5 地理定位，如何从中获得价值。 2) 基于条件逻辑从已知的项目数组中选择一个项目。 3) 如何使用图片 URL 更新页面。这些中的每一个都是您可以在 Google 上查找、尝试、测试、修补等的东西。您不太可能找到一个完全您正在尝试做的教程，但是每个单独的功能都应该是可找到的，然后您只需将它们拼凑在一起。

【参考方案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);
);

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

【讨论】：

感谢 Josh，这真的帮了大忙。我之前在这个项目thebeachschool.eq.edu.au/freshwater-app/locator.html 中使用过 Geolocation，所以我之前在 PhoneGap 中使用过 API（经常使用控制台）。我在 JS Fiddle 中为我在澳大利亚昆士兰的特定位置使用了您的代码。有趣的是，地理定位很差。当我实际上在 -28,153 时，它把我固定在大约 38.79,22.57（希腊的某个地方）。我会更多地使用它，并让 JS 根据位置结果将类应用于 HTML 元素。

@RyanCoolwebs，很高兴它对你有用。顺便说一句很酷的网站。如果这是已接受的答案，请不要忘记点击复选标记按钮。另外，我敢猜测地理位置本身并没有关闭。这只是软件。它依靠精确的硬件来获得良好的信号。如果硬件没有收到正确的信号，则地理定位无法正确解释它。

我现在在工作中使用一台真正的搞砸的电脑。它正在为括号和现在打开一些浏览器而苦苦挣扎。我会检查我的笔记本电脑。不过有趣的是，我在谷歌地图和那个旧网站上进行了位置测试，并且它们工作正常。

【参考方案2】：

这可以使用 Google 的 Geocode API (https://developers.google.com/maps/documentation/business/geolocation/) 或 HTML5 地理定位功能 (http://diveintohtml5.info/geolocation.html) 之类的东西来实现

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