Question

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

理想情况下，我想使用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>

Answer 1

这是一个不错的tutorial。

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

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

并使用javascript将图片插入到div =“yourinfo”的div中。

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

更新：

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

Answer 2

这是您正在查看的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>');
            }
        });
    }

 })

确定用户位置，然后重定向到不同的主页

2 个答案: