Ads

O código a seguir faz uso do plugin geolocation do Cordova e também da API da Google Maps. Adicione o plugin em seu projeto e utilize o seguinte código;

<!DOCTYPE html>
<html>
<head>
    <title>GeoLocation</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">

    <style>
        @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
    </style>

    <link rel="stylesheet" href="css/app.css">
  
    <script src="cordova.js" id="xdkJScordova_"></script>

    <script src="js/app.js"></script>           <!-- for your event code, see README and file comments for details -->
    <script src="js/init-app.js"></script>      <!-- for your init code, see README and file comments for details -->
    <script src="xdk/init-dev.js"></script>     <!-- normalizes device and document ready events, see file for details -->
</head>

<body>
    <div id="googleMap" style="width:100%;height:400px;"></div>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    
 <script>
        document.addEventListener("deviceready", function(){
            navigator.geolocation.getCurrentPosition(function(position){
                
            var mapProp = {center:new google.maps.LatLng(position.coords.latitude,position.coords.longitude), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP};
            var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
            var marker=new google.maps.Marker({position:new google.maps.LatLng(position.coords.latitude,position.coords.longitude)});
            marker.setMap(map);
            }, function(error){
                if(error.code == PositionError.PERMISSION_DENIED)
                {
                    alert("O aplicativo não possui permissão para acessar o GPS");
                }
                else if(error.code == PositionError.POSITION_UNAVAILABLE)
                {
                    alert("GPS não encontrado.");
                }
                else if(error.code == PositionError.TIMEOUT)
                {
                    alert("Tempo de comunicação com o GPS muito longo.");
                }
                else
                {
                    alert("Erro desconhecido!");
                }
            }, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
        }, false);
    </script>    
</body>
</html>

Resultado

Não é possível testar este aplicativo no Bluestacks pelo fato do PC ou notebook não ter GPS, neste caso o teste obrigatoriamente terá que ser feito no seu próprio celular, ou, no próprio simulador do Intel XDK que utiliza posições de GPS falsas apenas para testar a aplicação.

screenshot_1

Ads

Anderson Oliveira

Anderson Oliveira é desenvolvedor, escritor e docente no CEETPS - Centro Estadual de Educação Tecnologia de São Paulo. Atualmente trabalha na Administração Central do CPS e leciona aulas de programação na Etec Prof. Carmine Biagio Tundisi de Atibaia.