6
respostas

Dúvida com Plugin

Bom dia.

Gostaria que me ajudasse ou me desse alguma luz para que eu possa resolver um problema com o plugin "cordova-geolocation".

O Chrome me retorna "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)", ou seja, erro no momento de executar a função "navigator.geolocation.getCurrentPosition".

Poderia me dar uma luz de como resolver isso ? Estou testando este pluguin neste projeto.

6 respostas

Oi Marco, tudo bem? Me mostra como você está usando a função por favor?

angular.module('app') .controller('nossaLojaCtrl', function($scope, $state, $ionicLoading, $cordovaGeolocation){

$scope.nossasLojas = { 'lat': '-19.9185086', 'long': '-43.9125832', 'razaosocial': 'Belo Horizonte - Santa Efigênia – Loja 21', 'nomefantasia': '', 'descricao': '', 'homepage': 'wwww.supermercadosbh.com.br', 'endereco': 'Av.Mem de Sá, 120 - Santa Efigênia', 'enderecoCompl': 'Belo Horizonte - MG - 30260-270', 'telefone': '(31) 3482-7998'

};

var inicializarMapa = function() {

// verifica se o navegador tem suporte a geolocalização if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position){ // callback de sucesso // configuracao inicial do mapa var mapOptions = { center: {lat: position.coords.latitude, lng: position.coords.longitude}, zoom: 15, mapTypeControl: true, zoomControl: true, rotateControl: true, streetViewControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP };

// instancia o mapa var map = new google.maps.Map(document.getElementById('map'), mapOptions);

addMarcacaoMapa( position.coords.latitude, position.coords.longitude, '', '', '', '', map, true);

// adicionando marcacao for ( var i = 0; i < $scope.nossasLojas.length; i = i + 1 ) { addMarcacaoMapa( $scope.nossasLojas[i].lat, $scope.nossasLojas[i].long, $scope.nossasLojas[i].razaosocial, $scope.nossasLojas[i].nomefantasia, $scope.nossasLojas[i].descricao, $scope.nossasLojas[i].homepage, map, false); } }, function(error){ // callback de erro console.log('Erro ao obter localização.', error); }); } else { console.log('Navegador não suporta Geolocalização!'); } }

var addMarcacaoMapa = function (lat, long, razaosocial, nomefantasia, descricao, site, map, minhaLocalidade){ if ( !minhaLocalidade ) { var contentString = '

'+ '
'+ '
'+ '

'+nomefantasia+'

'+ '
'+ '

'+descricao+'

'+ '

Visite-nos, '+site+'' '

'+ '
';

var myLatlng = new google.maps.LatLng(lat, long);

var infowindow = new google.maps.InfoWindow({ content: contentString });

var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable: true, animation: google.maps.Animation.DROP, title: razaosocial });

marker.addListener('click', function() { infowindow.open(map, marker); }); } else { var myLatlng = new google.maps.LatLng(lat, long);

var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable: true, animation: google.maps.Animation.DROP, title: 'Minha Localidade', icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' });

marker.addListener('click', function() { infowindow.open(map, marker); }); } }

// inicializa o mapa inicializarMapa(); });

angular.module('app')
.controller('nossaLojaCtrl', function($scope, $state, $ionicLoading, $cordovaGeolocation){

    $scope.nossasLojas = {
         'lat': '-19.9185086', 
        'long': '-43.9125832', 
        'razaosocial': 'Belo Horizonte - Santa Efigênia – Loja 21', 
        'nomefantasia': '', 
        'descricao': '', 
        'homepage': 'wwww.supermercadosbh.com.br', 
        'endereco': 'Av.Mem de Sá, 120 - Santa Efigênia',
        'enderecoCompl': 'Belo Horizonte - MG - 30260-270',
        'telefone': '(31) 3482-7998'

    };

    var inicializarMapa = function() {

        // verifica se o navegador tem suporte a geolocalização
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position){ // callback de sucesso
                // configuracao inicial do mapa
                var mapOptions = {
                  center: {lat: position.coords.latitude, lng: position.coords.longitude},
                  zoom: 15,
                  mapTypeControl: true,
                  zoomControl: true,
                  rotateControl: true,
                  streetViewControl: true,
                    mapTypeId: google.maps.MapTypeId.ROADMAP          
                };

                // instancia o mapa
                var map = new google.maps.Map(document.getElementById('map'), mapOptions);

                addMarcacaoMapa(
                        position.coords.latitude, 
                        position.coords.longitude, 
                        '', 
                        '', 
                        '', 
                        '',
                        map,
                        true);

                // adicionando marcacao
                for ( var i =  0; i < $scope.nossasLojas.length; i = i + 1  )
                {            
                    addMarcacaoMapa(
                        $scope.nossasLojas[i].lat, 
                        $scope.nossasLojas[i].long, 
                        $scope.nossasLojas[i].razaosocial, 
                        $scope.nossasLojas[i].nomefantasia, 
                        $scope.nossasLojas[i].descricao, 
                        $scope.nossasLojas[i].homepage,
                        map,
                        false);
                }
            }, 
            function(error){ // callback de erro
               console.log('Erro ao obter localização.', error);
            });
        } else {
            console.log('Navegador não suporta Geolocalização!');
        }
    }

    var addMarcacaoMapa = function (lat, long, razaosocial, nomefantasia, descricao, site, map, minhaLocalidade){
        if ( !minhaLocalidade  )
        {
            var contentString = 
              '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h3 id="firstHeading" class="firstHeading">'+nomefantasia+'</h3>'+
              '<div id="bodyContent">'+
              '<p style="text-align: justify;">'+descricao+'</p>'+
              '<p>Visite-nos, <a href="'+site+'">'+site+'</a>'
              '</div>'+
              '</div>';

            var myLatlng = new google.maps.LatLng(lat, long);

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                draggable: true,
                   animation: google.maps.Animation.DROP,
                title: razaosocial
            });

            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
        }
        else
        {
            var myLatlng = new google.maps.LatLng(lat, long);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                draggable: true,
                   animation: google.maps.Animation.DROP,
                title: 'Minha Localidade',
                icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
            });

            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
        }        
    }    

    // inicializa o mapa
    inicializarMapa();
});

Opa, desculpa a demora, mas em que navegador você está testando. O Erro diz que somente conexões seguras são permitidas. Você tentou colocar em algum servidor de testes como o no Heroku com HTTPS pra ver se funcionava?

Estou testando no chrome. Eu estou rodando no servidor do ionic mesmo (localhost:8100). Sabe como proceder ?

Wow, talvez isso seja complicadinho de testar no chrome, eu mesmo tentei um javascript simples aqui e tive erros. Será que você não consegue testar direto no dispositivo?