Суббота, 01 февраля 2014 00:00

Геолокация по ip. Sypex Geo

Оцените материал
(3 голосов)

Продолжаем наши изыски на тему геолокации по ip.

 

Подключаем Maxmind

HTML5 GeoLocation API

Sypex Geo. Продолжение

 

В блоге уже имел место рассказ об использовании на сайте HTML5 GeoLocation API и Maxmind; а совсем недавно на форуме был рассмотрен простенький пример использования Sypex Geo - мы с вами радушно встретили посетителя сайта, угадав его город и выведя соответствующую строчку приветствия. Пойдем сегодня чуть дальше и в небольшом этом уроке покажем на карте Google уже местоположение нашего визитера, ок? - при этом будем работать, конечно, с базой данных именно Sypex Geo.

Dev banner 2

Используем тот же самый код, что и в предыдущем примере; только лишь уберем строчку приветствия, которое нам теперь не нужно:

 

echo "Привет, {$city['city']}!";

 

, вместо нее добавим

 

extract($city);

 

(импорт переменных), все это вместе выглядит следующим образом:

 

<?php
$ip = $_SERVER['REMOTE_ADDR'];
include("SxGeo.php");
$SxGeo = new SxGeo('SxGeoCity.dat');
$city = $SxGeo->get($ip);
extract($city);
?>

 

Далее попросту скопируем код, приведенный на страничке JavaScript API Google Карт (версия 3), не забыв разместить в верхней его части приведенные строчки кода... нам с вами осталось сделать, собственно, очень немногое. Взгляните, в окончательном итоге получаем следующее:

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<?php
$ip = $_SERVER['REMOTE_ADDR'];
include("SxGeo.php");
$SxGeo = new SxGeo('SxGeoCity.dat');
$city = $SxGeo->get($ip);
extract($city);
?>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=KEY_FOR_YOUR_DOMEN&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng("<? echo "$lat\", \"$lon"; ?>"),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:640px; height:480px"></div>
</body>
</html>

 

Как видите, мы только и сделали, что в строке

 

src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">

 

ввели key, полученный для нашего домена (иначе не заработает, Google не позволит), а также вместо статических координат

 

center: new google.maps.LatLng(-34.397, 150.644),

 

прописали две переменные, заставив таким образом php и js работать сообща:

 

center: new google.maps.LatLng("<? echo "$lat\", \"$lon"; ?>"),

 

Откуда взялись переменные $lat и $lon ? Действительно, так сразу и не сообразишь. Но вы все поймете, если на минутку вернетесь назад и в порядке эксперимента попробуете взглянуть в браузере результат выполнения следующего кода:

 

<?php
$ip = $_SERVER['REMOTE_ADDR'];
include("SxGeo.php");
$SxGeo = new SxGeo('SxGeoCity.dat');
$city = $SxGeo->get($ip);
print_r ($city);

 

Увидите что-то вроде

 

Array ( [regid] => 9737 [cc] => 185 [fips] => 66 [lat] => 60.076238 [lon] => 30.121382 [country] => RU [city] => Санкт-Петербург )

 

Использование функции extract в данном случае вполне безопасно; но, пожалуй, несколько неоправданно... это сделано здесь, так сказать, сугубо в общеобразовательных целях. Пожалуй, будет лучше, если из окончательного варианта кода мы с вами удалим процитированную ниже строчку: 

 

extract($city);

 

а строчку

 

center: new google.maps.LatLng("<? echo "$lat\", \"$lon"; ?>"),

 

изменим следующим образом, обратившись напрямую к переменным массива:

 

center: new google.maps.LatLng("<?= $city['lat']?>", "<?= $city['lon'] ?>"),

 

Впрочем, работает и так и эдак.

Дальнейшие действия: создаем в публичной директории сайта отдельный каталог, содержащий всего три файла: SxGeo.php, SxGeoCity.dat и index.php, последний содержит полученный нами в итоге код без каких-либо изменений, разве что размеры карты подредактируйте в стилях (в случае, если что-либо непонятно - велкам на форум, ссылка вверху сообщения). Теперь, если открыть в браузере index.php - вы увидите на карте собственное местонахождение... только не забудьте, повторюсь, испросить у Google кей для вашего домена. Иначе - не увидите ничего, кроме благожелательного напутственного сообщения от Гугля.

-----

Примечание. В Sypex Geo 2.2 от 16 мая 2014 есть ряд критичных изменений; в частности - изменена структура массива; таким образом, последняя из процитированных строчек кода будет выглядеть у нас c вами теперь следующим образом:

 

center: new google.maps.LatLng("<?= $city['city']['lat']?>", "<?= $city['city']['lon'] ?>"),

 

Пробуйте. Все остальное без изменений.

Последнее изменениеЧетверг, 16 февраля 2017 05:12

Оставить комментарий

Добавьте ваш комментарий

Linux для вас. Аутсорсинг и консультации

Линукс для вас. Аутсорсинг и консультации.

SEO-оптимизация. SEO-услуги

Заказать сайт

Веб-разработка. Заказать сайт

Вы можете заказать сайт-визитку, блог, корпоративный сайт, интернет-магазин или коммерческий web-портал.