0

我希望能够根据用户查看网站的位置更改图像？或者将它们导航到另一个页面。

理想情况下，我想使用 jquery 来解决这个问题，但我不能 100% 确定这是否有效。

例如，如果用户从伦敦访问该站点，我想换一个不同的图像。我们可以针对特定地区吗？

谢谢阿娇

刚刚在beda0805的帮助下让它工作

这是解决方案

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Location</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>

  <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $.get("http://ipinfo.io", function (response) {
     if(response.region == 'London'){
       $("#address").append("<p>Your in London</p>");
     }
     if(response.region != 'London'){
       $("#address").append("<p>Your anywhere else</p>");
     }
    }, "jsonp"); 
</script>
</head>
<body>
  <div id="address"></div>
</body>
</html>
4

2 回答 2

3

这是一个很好的教程。

您可以使用它来检查用户是否来自伦敦：

google.loader.ClientLocation.address.city == 'London'

并使用 javascript 将图片插入 id="yourinfo" 的 div 中。

elem.src = 'images/london.jpg';
document.getElementById("yourinfo").appendChild("elem");

更新：

上面的 API 似乎已经过时了。这里的工作解决方案：jsfiddle感谢Ben Dowling

于 2013-08-12T18:53:28.757 回答
0

这是您正在查看的 jqIpLocation 插件演示所使用的代码。如您所见，它非常简单。

$("#btnGetLocation").on("click", function () {

    if ($('#txtIP').val() != "") {
        $('#divIP').empty().append('<div style="padding:5px;"><img src="loader.gif" /></div>');

        $.jqIpLocation({
            ip: $('#txtIP').val(),
            locationType: 'city',
            success: function (location) {
                $('#divIP').empty();
                $('#divIP').append('<table class="table table-bordered table-striped">'
                + '<tr><td class="title">IP</td><td class="result">' + location.ipAddress + '</td></tr>'
                + '<tr><td class="title">Country</td><td class="result">' + location.countryName + '</td></tr>'
                + '<tr><td class="title">Country Code</td><td class="result">' + location.countryCode + '</td></tr>'
                + '<tr><td class="title">City</td><td class="result">' + location.cityName + '</td></tr>'
                + '<tr><td class="title">Region</td><td class="result">' + location.cityName + '</td></tr>'
                + '<tr><td class="title">Latitude</td><td class="result">' + location.latitude + '</td></tr>'
                + '<tr><td class="title">Longitude</td><td class="result">' + location.longitude + '</td></tr>'
                + '</table>');
            }
        });
    }

 })
于 2013-08-12T19:00:29.627 回答