Геолокация в браузере

Геолокация, несомненно, является одной из самых полезных функций смартфонов, и большое внимание уделяется нативным приложениям, которые используют ее в своих интересах. Менее ценится тот факт, что теперь возможно создавать веб-приложения и сайты с возможностями геолокации. Спецификация W3C Geolocation API предлагает стандарт для доступа к службам определения местоположения в браузере через Javascript. Спецификация является недавней, но уже широко поддерживается современными браузерами. Сейчас самое подходящее время подумать о том, как мобильный сайт, учитывающий местоположение, может принести пользу вашим пользователям.

Текущая поддержка браузера для W3C Geolocation API

• iPhone 3.0 +
• Android 2.0 +
• Firefox 3.5
• Safari 5.0
• Chrome 5.0
• Internet Explorer 9.0+

Как браузер находит вас

В геолокации используется ряд методов. Ваш браузер может просто найти ваш IP-адрес или узнать у Google местоположение ближайшей точки доступа Wi-Fi. Настольный браузер, не имеющий доступа к GPS, прибегнет к одному из этих методов, и они не очень точны. Chrome пропустил мое текущее местоположение примерно на 15 км, но этого достаточно, чтобы сказать, что я в Мельбурне, Австралия.

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

Как и в случае с собственными приложениями, разрешение для браузера использовать ваше местоположение всегда разрешено. Пользователи получат запрос на доступ к своему местоположению и могут сбросить разрешения в любое время через настройки своего браузера. Задача состоит в том, чтобы пользователи доверяли вам использовать свое местоположение ответственно, и чтобы ваш сайт предлагал ценность с доступом к данным о местоположении или без них.

Код

Если геолокация поддерживается, будет доступен глобальный объект navigator.geolocation

 if ( navigator.geolocation )
{
	navigator.geolocation.getCurrentPosition(handlePosition);
}

getCurrentPosition

 function handlePosition(pos)
{
	alert("Your location is: " + pos.coords.latitude + ', ' + pos.coords.longitude);
}

Попытайся:

Получить мое текущее местоположение

Объект позиции должен иметь следующие свойства:

• координаты широты в градусах.
• координаты долготы в градусах.
• Координаты. Точность приблизительная, в метрах.
• Координаты в градусах с севера (0… 360).
• скоординированная скорость в метрах в секунду.
• координаты высоты в метрах над уровнем моря ( приблизительно — я бы на это не рассчитывал!).
• Координаты высоты Точность в метрах.
• отметка времени объекта DOMTimeStamp.

Есть большая вероятность, что многие из них будут nullcoords.latitudecoords.longitude

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

 if ( navigator.geolocation )
{
	navigator.geolocation.getCurrentPosition(handlePosition, handleError);
}

function handleError(error)
{
	switch (error.code)
	{
		case error.PERMISSION_DENIED:
			// User denied access to location. Perhaps redirect to alternate content?
			alert('Permission was denied');
			break;
		case error.POSITION_UNAVAILABLE:
			alert('Position is currently unavailable.');
			break;
		case error.PERMISSION_DENIED_TIMEOUT:
			alert('User took to long to grant/deny permission.');
			break;
		case error.UNKNOWN_ERROR:
			alert('An unknown error occurred.')
			break;
	}
}

Ваше веб-приложение должно корректно обрабатывать все случаи. Если пользователь отказывается поделиться своим местоположением, подумайте о предложении альтернативного контента или функций, которые не зависят от геолокации. Дальнейшее рассмотрение может быть уделено вашим пользователям с параметрами, переданными getCurrentPosition

 options = {
	enableHighAccuracy: false,
	timeout:            30000,  // milliseconds (30 seconds)
	maximumAge:         600000 // milliseconds (10 minutes)
}
navigator.geolocation.getCurrentPosition(handlePosition, handleError, options);

enableHighAccuracy — это, по сути, подсказка, что вам нужны данные GPS (а не менее точные методы, такие как триангуляция вышек сотовой связи). Как упомянуто выше, GPS разряжает батарею телефона и не всегда требуется — установите это в false

Тайм-аут указывает, как долго вы готовы ждать результатов определения местоположения.

 if ( navigator.geolocation )
{
	navigator.geolocation.watchPosition(handlePosition, handleError, {
		enabledHighAccuracy: true,
		maximumAge: 60000
		});
}

function handlePosition(pos)
{
	console.log("Heading: " + pos.coords.heading);
	console.log("Speed:   " + pos.coords.speed);
}

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

 function detectBrowser()
{
	var userAgent = navigator.userAgent;
	var mapDiv = document.getElementById("map");

	if (userAgent.indexOf('iPhone') != -1 || userAgent.indexOf('Android') != -1 )
	{
		mapDiv.style.width = '100%';
		mapDiv.style.height = '100%';
	}
	else
	{
		mapDiv.style.width = '600px';
		mapDiv.style.height = '800px';
	}
}

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

 var map = new google.maps.Map(document.getElementById("map"), {
	zoom: 10,
	mapTypeId: google.maps.MapTypeId.ROADMAP
});

 function handlePosition(pos)
{
	// Google maps use a different location object (LatLng) which we can convert to easily:
	latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);

	// Center the map on the current location.
	map.setCenter(latlng);

	// Drop a marker on the current location
	marker = new google.maps.Marker
	({
		map: map,
		draggable: false,
		animation: google.maps.Animation.DROP,
		position: latlng
	});
}