Эта статья о совместном использовании двух web сервисов: IPLoc и Яндекс.Карты.
Прежде всего, разберемся зачем нужны одновременно два сервиса.
С Яндекс.Картами, все просто. Этот сервис позволяет разместить на странице спутниковую или обычную карту. При этом карта будет интерактивной, т.е. посетитель сможет перемещать её, изменять масштаб, тип, измерять расстояния и т.д.
Сервис IPLoc, в свою очередь, позволяет определить географические координаты указанного IP адреса, т.е. широту и долготу. А это как раз те данные, которые нужны чтобы указать точку на Яндекс.Карте.
Примечание. Вместо Яндекс.Карт можно использовать Google Maps, о которых я уже рассказывал. В этот раз я выбрал Яндекс.Карты потому что они содержат более подробные карты с названиями улиц для городов СНГ.
Таким образом, используя оба сервиса одновременно мы можем определить место нахождения посетителя и показать его на карте.
Принцип работы.
1) С помощью IPLoc определяем где находится посетитель.
2) Размещаем на странице Яндекс.Карту.
3) Центрируем карту в соответствии с полученными координатами.
4) Дополнительно можно разместить на карте сообщение (балун) с каким-нибудь текстом, например, названием города.
Получение данных от IPLoc.
Прежде всего нужно сформировать запрос вида
http://iploc.mwudka.com/iploc/ххх.ххх.ххх.ххх/format
Вместо ххх.ххх.ххх.ххх подставляем нужный IP адрес.
Последний сегмент адреса указывает формат в котором вы хотите получить данные.
С точки зрения обработки PHP скриптом, самым удобным является JSON формам. В этом случае можно преобразовать строку с данными в объект PHP с помощью всего одной функции — json_decode.
Т.е. запрос примет вид
http://iploc.mwudka.com/iploc/ххх.ххх.ххх.ххх/json
Теперь пару слов об использовании Яндекс.Карт.
Прежде всего, вам придется зарегистрироваться на Яндексе и получить API-ключ.
Примечание. В отличие от Google Maps получить ключ для localhost’а нельзя, поэтому чтобы локально потестировать сайт создайте виртуальный хост, например, http://mysite.l и получите ключ для него (главное, чтобы имя состояло хотя бы из двух частей, разделенных точкой).
UPD. Тут я ошибся. См. комментарий Андрея Кармацкого.
Переходим к реализации
Создаем PHP скрипт (index.php) со следующим кодом.
<?php
$visitorIP = $_SERVER['REMOTE_ADDR'];
$location = json_decode(file_get_contents('http://iploc.mwudka.com/iploc/'.$visitorIP.'/json'));
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Где я? :-)</title>
<script src="http://api-maps.yandex.ru/1.0/index.xml?key=your_api_key"
type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
var map;
map = new YMaps.Map(document.getElementById("mymap"));
map.setCenter(new YMaps.GeoPoint(<?php echo $location->longitude; ?>, <?php echo $location->latitude; ?>), 13,
YMaps.MapType.HYBRID);
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.ScaleLine());
map.enableRuler();
var text = "<?php echo $location->city; ?>";
map.openBalloon(new YMaps.GeoPoint(<?php echo $location->longitude; ?>, <?php echo $location->latitude; ?>), text);
};
</script>
</head>
<body>
<div id="mymap" style="height:400px; width:600px;"></div>
</body>
</html>
Разберем по порядку работу скрипта.
Строки 2 и 3 – получаем IP адрес посетителя, формируем и отправляем запрос на IPLoc. Функция json_decode преобразует ответ сервиса в объект PHP.
Для справки привожу структуру этого объекта:
object(stdClass)[1]
public 'country_code' => string 'UA' (length=2)
public 'country_code3' => string 'UKR' (length=3)
public 'country_name' => string 'Ukraine' (length=7)
public 'region' => string '13' (length=2)
public 'city' => string 'Kiev' (length=4)
public 'postal_code' => null
public 'latitude' => float 50.4333
public 'longitude' => float 30.5167
public 'area_code' => null
public 'dma_code' => null
Названия свойств говорят сами за себя, поэтому комментировать я их не буду.
После того, как данные получены, создаем страницу. Тут наибольший интерес представляет подключение и настройка карты.
Прежде всего, мы определяем на странице блок в котором будет находится карта. В данном случае это:
<div id="mymap" style="height:400px; width:600px;"></div>
Для вставки карты нужно добавить два тега скрипт. В первом указываем ключ, а во втором – функцию, которая создает и настраивает карту.
Как видите, для работы с картой используется объект YMaps. Он позволяет изменять любые настройки отображения данной карты.
В данном случае для установки центра карты мы использовали данные от IPLoc (строка 19) метод setCenter. И затем добавили несколько элементов управления (строки 21 — 23). Кроме того, включили функцию измерения расстояний (строка 24). В данном примере она, конечно, не нужна, но возможности карты демонстрирует очень хорошо 😉
И завершающим этапом добавили название города на карту (строки 25, 26).
Как видите, минимум кода и вполне работоспособный результат 😉
Скачать
Хотите поэкспериментировать? Качайте архив с этим примером.
Перед экспериментами не забудьте указать свой API-ключ.
Обо всех вопросах, замечаниях, предложениях и пожеланиях пишите в комментариях, они отрыты 🙂
До встречи!
Интересно почитать.
Живете в Одессе и хотите создать сайт? Сайты в одессе помогут вам решить эту задачу.
Захист інформації — необхідна умова нормальної роботи будь-якого бізнесу цифровий підпис закон
