Ir para conteúdo
Thais Hoe

Geolocalização - Loja mais próxima do cliente

Recommended Posts

Bom dia!

Trabalho muito pouco com o JavaScript e preciso fazer um script que:

Pega a localização do cliente >> Faz o calculo da distância entre a localização e cada loja >> Faz o calculo de qual loja está mais próxima (em KM) >> Se a distancia da loja mais próxima for inferior a 30km = Mostra aviso com o endereço da loja mais próxima (se possível um botão pra ir pra pagina de informações, ou um popup que consiga colocar endereço,telefone,etc)  >> Se a distancia da loja mais próxima for superior a 30km = exibe aviso de que não tem lojas próximas a localização atual dele.

 

Fiz com "alert" os avisos, mas se eu conseguisse fazer tudo isso com um popup seria legal. Por hora coloquei duas lojas apenas, mas posteriormente vou ter que colocar mais de 10, então se houver um jeito de fazer esse código ser mais "limpo" quando isso acontecer (criando uma lista ou algo do gênero) também agradeço.

 

Tenho um código mais ou menos pronto, mas como não domino a linguagem acredito que contém alguns erros:

// Lojas
var Americana = {
	posicao : {
		latitude1 : -22.742685,
		longitude1 : -47.341661	
}
}

var BeloHorizonte = {
	posicao : {
		latitude2 : -19.935678,
		longitude2 : -43.970808	
}
}

var Parametro = {
	distanciaMaxima : 30,

	// Funcao que ira verificar se o cliente esta por perto
	mostraLoja : function( posicao ){
		var distancia = MenorDistancia;
		// Verifica se o cliente nao esta muito longe
		if( distancia <= this.distanciaMaxima ){
			if ( confirm( 'A loja mais próxima está à ' + distancia + ' KM ' ) ){
				alert( 'Ver mais dados da loja' );
			}
		} else {
			alert( 'Ops, você está muito longe, não temos uma loja próxima' );
		}
	}
};

// Objeto localizacao
var Localizacao = {

	// Inicia
	inicia : function(){
		
		// Quando o browser retorna a posicao do usuario
		var sucesso = function( posicao ){
			Parametro.mostraLoja( posicao.coords );
		};

		// Erro no processo de obter a posicao
		var erro = function( erro ){
			var erroDescricao = 'Ops, ';
			switch( erro.code ) {
				case erro.PERMISSION_DENIED:
						erroDescricao += 'usuário não autorizou a Geolocation.';
				break;
				case erro.POSITION_UNAVAILABLE:
						erroDescricao += 'localização indisponível.';
				break;
				case erro.TIMEOUT:
						erroDescricao += 'tempo expirado.';
				break;
				case erro.UNKNOWN_ERROR:
						erroDescricao += 'não sei o que foi, mas deu erro!';
				break;
			}
			alert( erroDescricao )
		};

		// Verifica se o browser do usuario tem suporte a geolocation
		if ( navigator.geolocation ){
			navigator.geolocation.getCurrentPosition( sucesso, erro );
		} else {
			erro();
		}
	}
};

// Objeto para calcular a distancia entre dois pontos
// Adaptado dessa formula http://stackoverflow.com/questions/27928/how-do-i-calculate-distance-between-two-latitude-longitude-points
var Distancia1 = {
	distanciaEntreDoisPontos1 : function( pontoInicial, pontoFinal ){
		var R = 6371; // Radio da Terra
		var dLat = this.graus2Radianos( pontoFinal.latitude - pontoInicial.latitude1 ); 
		var dLon = this.graus2Radianos( pontoFinal.longitude - pontoInicial.longitude1 ); 
		var a = Math.sin( dLat/2 ) * Math.sin( dLat/2 ) + Math.cos( this.graus2Radianos( pontoInicial.latitude1 ) ) * Math.cos( this.graus2Radianos( pontoFinal.latitude ) ) * Math.sin( dLon/2 ) * Math.sin( dLon/2 ); 
		var c = 2 * Math.atan2( Math.sqrt( a ), Math.sqrt( 1-a ) ); 
		var d = R * c; 
		return d;
	},
	graus2Radianos : function( graus ){
		return graus * ( Math.PI/180 )
	}
};

// Objeto para calcular a distancia entre dois pontos
// Adaptado dessa formula http://stackoverflow.com/questions/27928/how-do-i-calculate-distance-between-two-latitude-longitude-points
var Distancia2 = {
	distanciaEntreDoisPontos2 : function( pontoInicial, pontoFinal ){
		var R = 6371; // Radio da Terra
		var dLat = this.graus2Radianos( pontoFinal.latitude - pontoInicial.latitude2 ); 
		var dLon = this.graus2Radianos( pontoFinal.longitude - pontoInicial.longitude2 ); 
		var a = Math.sin( dLat/2 ) * Math.sin( dLat/2 ) + Math.cos( this.graus2Radianos( pontoInicial.latitude2 ) ) * Math.cos( this.graus2Radianos( pontoFinal.latitude ) ) * Math.sin( dLon/2 ) * Math.sin( dLon/2 ); 
		var c = 2 * Math.atan2( Math.sqrt( a ), Math.sqrt( 1-a ) ); 
		var d = R * c; 
		return d;
	},
	graus2Radianos : function( graus ){
		return graus * ( Math.PI/180 )
	}
};

var MenorDistancia = Math.min (Distancia1.distanciaEntreDoisPontos1, Distancia2.distanciaEntreDoisPontos2);


$( document ).ready( function(){
Localizacao.inicia();
} );

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Jeft
      Depois de "um ano sabático", estou voltando ao desenvolvimento em PHP.
      Neste retorno, me deparei com a seguinte necessidade: 
      Através de um cadastro, gostaria de criar um link passando alguns parâmetros, tipo:
      globo.com.br
      Crio o cadastro FLAMENGO.
      Aí queria criar "automaticamente" um link flamengo.globo.com.br para acessar através do browser. Seria o equivalente a globo.com.br/noticia/busca.php?time=flamengo
      Se cadastro Vasco: vasco.globo.com.br
      Não sei nem por onde começar... Já tentei algumas coisas mas ainda não tive sucesso.
      Obrigado
    • Por MatheusH
      Olá, toda vez que eu respondo um comentário fica escrito: Seu conteúdo precisará ser aprovado por um moderador. 
       
      E tem uns comentários que nem foram aprovados e que acho que seria de utilidade para quem estava com dúvida.
       
      Como posso resolver isso? eu não sou um bot ahushaus
    • Por AnaSalazar
      Boa tarde. Alguém me pode ajudar??? Criei css e html mas quando abre noutro computador, as coisas desformatam, sabem porque isso acontece? Alguém me ajude!!
    • Por C4rol
      Oi! Minha família pediu para eu mexer no site deles e acabei por pegar um site pronto e adaptar conforme o necessário. Entendo somente um pouco de programação, então estou me batendo bastante... Desculpem meus termos leigos, espero que vocês possam me ajudar...
       
      Ao fazer o upload das fotos do site - ao total fica 200 MB de imagens - notei que demoram para carregar no celular (iPhone) e em alguns modelos mais simples de Android nem abrem. A qualidade das fotos é muito importante para este site no "desktop", porém não tanto em "mobile". É mais importante que as imagens estejam aparecendo. 
      Gostaria de saber se existe alguma forma de eu reduzir a resolução dessas fotos somente no site para dispositivos móveis. Ou quem sabe exista até outra solução.
       
      Como estou editando por cima de um layout pronto gratuito, não sei onde está cada linha de código... Mas também gostaria de modificar algumas coisas no modo que o site aparece no dispositivo móvel (tamanho da fonte, espaçamento...). Em qual pasta e com qual tag eu poderia encontrar?
       
      Agradeço desde já! Abraços!
    • Por viniciusfroner
      Caro moderadores e administradores do iMasters, não sei se estou postando na seção certa do fórum, se estiver errado poderiam mover o tópico? Obrigado.
       
      Tenho 2 notebooks um i3 e outro i7, ambos nunca foram formatados, entretanto reparei no gerenciador de tarefas vários processos de segundo plano sendo executados, enquanto em outros dispositivos vejo bem poucos processos. Sem contar com os processos do próprio Windows.
       
      Pessoal a minha duvida é a seguinte, tem como eu impedir que o windows rode esses processos desnecessários? O que vocês me recomendam, fazer uma mega limpeza, ou formatar o note de vez? Vale lembrar, que ambos notebooks rodam liso, muito raramente travam.
       
       

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.