Отмечаем место нахождения посетителя на Яндекс.Карте

Эта статья о совместном использовании двух 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-ключ.
Обо всех вопросах, замечаниях, предложениях и пожеланиях пишите в комментариях, они отрыты
До встречи!
Интересно почитать.
Живете в Одессе и хотите создать сайт? Сайты в одессе помогут вам решить эту задачу.
Захист інформації – необхідна умова нормальної роботи будь-якого бізнесу цифровий підпис закон
Понравилась статья? Подписывайтесь на продолжение
!
Опубликовано в HTML, JavaScript, PHP, Web разработка View Comments
-
Big_Shark
-
Владимир
-
Big_Shark
-
Владимир
-
Андрей Параничев
-
Владимир
-
Дум Кат
-
Владимир
-
Дум Кат
-
Владимир
-
Big_Shark
-
Видео Мэн
-
Владимир
-
Андрей Кармацкий
-
Владимир
-
Андрей Кармацкий
-
telonots
-
Владимир








