2013-08-12 3 views
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> 
+2

Несомненно, есть способы проверить местоположение пользователя. Что вы пробовали? – j08691

+0

Еще ничего не пробовал, но были поисковые запросы для возможных решений и наткнулись на это http://jquery-plugins.net/jqIpLocation/jqIpLocation.html, но не были уверены, что IP был правильным путем. Если у вас есть любые рекомендации по поиску в Google, которые были бы наиболее желанными :) – Gillian

ответ

3

Вот хороший tutorial.

Вы можете использовать это, чтобы проверить, является ли пользователь из Лондона:

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

и использовать JavaScript, чтобы вставить изображение в DIV с идентификатором = «yourinfo».

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

UPDATE:

Над API, кажется устаревшим. Рабочее решение здесь: jsfiddleBen Dowling

+0

О, блестящий, спасибо за это. Отдай это. Никогда не видел ClientLocation раньше ... узнайте что-то новое каждый день. еще раз спасибо. даст вам знать, как я нахожусь – Gillian

+0

Спасибо за учебник, просто попробовав это сейчас, но продолжаю получать сообщение «возгласы». Есть идеи? Я взял прямую копию кода из учебника. вот моя страница gillianbell.me.uk/location – Gillian

+1

Взгляните на это: [link] (http://jsfiddle.net/zK5FN/2/) – beda0805

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>'); 
      } 
     }); 
    } 

}) 
Смежные вопросы