Геолокацтя на JavaScript




Иногда при разработке бывает полезно определить местоположение посетителя сайта. Например, чтобы поприветствовать на его языке, или вывести картинки с основными достопримечательностями города посетителя. На помощь в геолокации приходят различные сервисы. И один из таких сервисов мы сегодня применим.
Сервис называется Google Maps Javascript API V3 Services. Автор — естественно, Google.
В примере мы разместим на странице карту Google map и маркером отметим на карте текущее положение посетителя.
Одно небольшое замечание — браузер посетителя должен поддерживать технологию геолокации. Большинство современных браузеров технологию поддерживают, но «старичкам» придется туго.

HTML каркас

Для начала создадим простой html-файл

<!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>
	<title>Геолокация браузера с использованием Javascript's Geolocation API</title>
        <!--- Здесь будут стили и подключение JavaScript библиотек --->
</head>
<body>
        <div id="mappoint">
              <!-- Здесь разместим карту --->
        </div>
        <!--- Здесь будет JavaScript код --->
</body>
</html>

Немного стиля не повредит

В заголовок добавим стиль:

<style type="text/css">
 	html,
	body {
		height: 100% ;
		margin: 0px 0px 0px 0px ;
		overflow: hidden ;
		padding: 0px 0px 0px 0px ;
		width: 100% ;
		}
 	#mappoint {
			height: 100% ;
			width: 100% ;
		}
</style>

Здесь все просто.

Добавляем JavaScript

Подключаем наш любимый JQuery и библиотеку Google maps API.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
        var mappoint = $( "#mappoint" );
        //Функция добавляет маркер на карту Google
        function addMarker( latitude, longitude, label ){
                var marker = new google.maps.Marker({
			map: map,
			position: new google.maps.LatLng(
				latitude,
				longitude
			),
		        title: (label || "")
	        });
                return( marker );
	}
        //Функция меняет позицию маркера
        function updateMarker( marker, latitude, longitude, label ){
		marker.setPosition(
			new google.maps.LatLng(
				latitude,
				longitude
			)
		);
		if (label){
			marker.setTitle( label );
		}
	}

        //Проверяем, поддерживает браузер геолокацию
        if (navigator.geolocation) {
                var locationMarker = null;
                //Определяем геопозицию браузера в случае успеха - отрабатывает первая функция, в случае неудачи - обрабатываем ошибку
                navigator.geolocation.getCurrentPosition(
                        function( position ){
                                if (locationMarker){
					return;
				}
                                //Добавляем карту с центром в определенной позиции браузера и 11 уровнем детализации
                                map = new google.maps.Map(
                                        mapContainer[ 0 ],
                                        {
				                zoom: 11,
				                center: new google.maps.LatLng(
					                position.coords.latitude,
					                position.coords.longitude
				                ),
				                mapTypeId: google.maps.MapTypeId.ROADMAP
			                }
		                );
                                locationMarker = addMarker(
					position.coords.latitude,
					position.coords.longitude,
					position.address.city
				);
                        },
                        function( error ){
                                map = new google.maps.Map(
                                        mappoint[ 0 ],
                                        {
				                zoom: 11,
				                center: new google.maps.LatLng(
					                55.75634,
					                37.63002
				                ),
				                mapTypeId: google.maps.MapTypeId.ROADMAP
			                }
		                );
                        },
				{
					timeout: (5 * 1000),
					maximumAge: (1000 * 60 * 15),
					enableHighAccuracy: true
				}
			);
                        var positionTimer = navigator.geolocation.watchPosition(
				function( position ){
                                        updateMarker(
						locationMarker,
						position.coords.latitude,
						position.coords.longitude,
						position.address.city
					);
                                }
                        );
                        setTimeout(
				function(){
                                        navigator.geolocation.clearWatch( positionTimer );
				},
				(1000 * 60 * 5)
			);
	}
</script>

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

Share|

Нет похожих сообщений.

просмотров:1 062