Android гео приложение с PhoneGap, JQuery Mobile и Google Maps


Это Android геолокационное приложение использует PhoneGap API для нахождения геопозиции телефона и отображает точку позиции телефона на карте Google Maps. JQuery Mobile используется для отображения страницы для карты. Страница растягивается на полную высоту и ширину при любой ориентации или изменениях размера окна. Сделано с Eclipse и Android SDK. Это демо также работает в любом браузере с поддержкой Geolocation API.

<!DOCTYPE html> 
<html> 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <title>Map</title>
    
    <link rel="stylesheet" href="css/jquery.mobile-1.0b1.css" />
    
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.0b1.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="js/phonegap.0.9.5.1.js"></script>
    
<script type="text/javascript">

var map;

$(document).ready(function(){
	$(window).unbind();
	$(window).bind('pageshow resize orientationchange', function(e){
		max_height();
	});
	google.load("maps", "3.5", {"callback": map, other_params: "sensor=true&language=en"});
});

function max_height(){
	var h = $('div[data-role="header"]').outerHeight(true);
	var f = $('div[data-role="footer"]').outerHeight(true);
	var w = $(window).height();
	var c = $('div[data-role="content"]');
	var c_h = c.height();
	var c_oh = c.outerHeight(true);
	var c_new = w - h - f - c_oh + c_h;
	var total = h + f + c_oh;
	if(c_h<c.get(0).scrollHeight){
		c.height(c.get(0).scrollHeight);
	}else{
		c.height(c_new);
	}
}
		
function map(){
    var latlng = new google.maps.LatLng(55.17, 23.76);
    var myOptions = {
      zoom: 6,
      center: latlng,
	  streetViewControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    
    navigator.geolocation.getCurrentPosition(geo_success, geo_error, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
}

function geo_error(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}

function geo_success(position) {
	map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
	map.setZoom(15);

    var info = 
    ('Latitude: '         + position.coords.latitude          + '<br>' +
    'Longitude: '         + position.coords.longitude         + '<br>' +
    'Altitude: '          + position.coords.altitude          + '<br>' +
    'Accuracy: '          + position.coords.accuracy          + '<br>' +
    'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '<br>' +
    'Heading: '           + position.coords.heading           + '<br>' +
    'Speed: '             + position.coords.speed             + '<br>' +
    'Timestamp: '         + new Date(position.timestamp));

	var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
	var marker = new google.maps.Marker({
		position: point,
		map: map
	});
	var infowindow = new google.maps.InfoWindow({
	    content: info
	});
	google.maps.event.addListener(marker, 'click', function() {
	  infowindow.open(map,marker);
	});
          
};
</script>

</head> 
<body> 

<div data-role="page" id="index" data-theme="b">
	
	<div data-role="content" style="padding:0;">
		<div id="map" style="width:100%;height:100%;"></div>
	</div>
	
</div>

</html>

Скачать исходник приложения Map для Android map.7z.

Геопозицию для эмулятора Android можно установить через telnet. Откройте консоль, подключите к устройству и исправить географические координаты. Номер порта можно увидеть в названии программы Android эмуляторa.

telnet localhost 5554
geo fix 25.28 54.68
Запись опубликована в рубрике Программирование с метками , , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт защищен политикой конфиденциальности и условиями использования reCAPTCHA и Google.