Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ You Are Here/ Итоговый пример. HTML5. Up and Running. Марк Пилгрим

Итоговый пример

Дата публикации: 25.03.2011

Попробуем применить на практике полученные знания и сделаем простой пример для определения положения пользователя используя geo.js.

При загрузке страницы нужно вызвать geo_position_js.init() чтобы определить поддерживается ли какой-то интерфейс геолокации знакомый geo.js. Если поддержка имеется, для пользователя можно создать кнопку «Определить местоположение», по клику на которую произойдет вызов функции lookup_location():

function lookup_location() {
	geo_position_js.getCurrentPosition(show_map, show_map_error);
}

Если пользователь дал согласие на определение месторасположения и устройство в состоянии это сделать, тогда происходит вызов функции show_map() с единственным аргументом loc. Loc — это объект, в свойствах которого содержаться широта, долгота и точность (я в этом примере точность не использую). Остальная часть функции show_map() создает встроенную карту, используя Google Maps API:

function show_map(loc) {
	$("#geo-wrapper").css({'width':'320px','height':'350px'});
	var map = new GMap2(document.getElementById("geo-wrapper"));
	var center = new GLatLng(loc.coords.latitude, loc.coords.longitude);
	map.setCenter(center, 14);
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.addOverlay(new GMarker(center, {draggable: false, title: "You are here (more or less)"}));
}

Если geo.js не в состоянии определить месторасположение, будет вызвана функция show_map_error():

function show_map_error() {
	$("#live-geolocation").html('Unable to determine your location.');
}

Куда дальше

Показать комментарии