Jump to content
Rodrigo Razzyel

converter km para R$ com o resultado do Google maps

Recommended Posts

Ola preciso de ajuda, ja tentei de varias formas mas não consegui, estou tendo dificuldade em converter km para R$ .
eu preciso que o resultado do google maps em km seja multiplicado por R$ 1,50 . assim o usuario teria o valor por km.. veja o codigo abaixo...

===============================================================================================

 

<!DOCTYPE html>
<head>
<title>Calcular distancia entre cidades (mapas e rotas)</title>
<script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function CalculaDistancia() {
$('#litResultado').html('Aguarde...');
//Instanciar o DistanceMatrixService
var service = new google.maps.DistanceMatrixService();
//executar o DistanceMatrixService
service.getDistanceMatrix(
{
//Origem
origins: [$("#txtOrigem").val()],
//Destino
destinations: [$("#txtDestino").val()],
//Modo (DRIVING | WALKING | BICYCLING)
travelMode: google.maps.TravelMode.DRIVING,
//Sistema de medida (METRIC | IMPERIAL)
unitSystem: google.maps.UnitSystem.METRIC
//Vai chamar o callback
}, callback);
}
//Tratar o retorno do DistanceMatrixService
function callback(response, status) {
//Verificar o Status
if (status != google.maps.DistanceMatrixStatus.OK)
//Se o status não for "OK"
$('#litResultado').html(status);
else {
//Se o status for OK
//Endereço de origem = response.originAddresses
//Endereço de destino = response.destinationAddresses
//Distância = response.rows[0].elements[0].distance.text
//Duração = response.rows[0].elements[0].duration.text
$('#litResultado').html("<strong>Origem</strong>: " + response.originAddresses +
"<br /><strong>Destino:</strong> " + response.destinationAddresses +
"<br /><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text +
" <br /><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text
);
//Atualizar o mapa
$("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed");
}
}
</script>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<label for="txtOrigem"><strong>Endereço de origem</strong></label>
<input type="text" id="txtOrigem" class="field" style="width: 400px" />
</td>
</tr>
<tr>
<td>
<label for="txtDestino"><strong>Endereço de destino</strong></label>
<input type="text" style="width: 400px" class="field" id="txtDestino" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Calcular distância" onclick="CalculaDistancia()" class="btnNew" />
</td>
</tr>
</tbody>
</table>
<div><span id="litResultado"> </span></div>
<div style="padding: 10px 0 0; clear: both"></div>
</body>
</html>

Share this post


Link to post
Share on other sites

Apenas o excerto relevante:

 $('#litResultado').html("<strong>Origem</strong>: " + response.originAddresses +
      "<br /><strong>Destino:</strong> " + response.destinationAddresses +
      "<br /><strong>Distância</strong>: " + response.rows[0].elements[0].distance.text +
      " <br /><strong>Duração</strong>: " + response.rows[0].elements[0].duration.text +
      " <br /><strong>Preço</strong>: R$ " + (parseFloat(response.rows[0].elements[0].distance.text.substring(0, response.rows[0].elements[0].distance.text.length - 3).split(",").join(".")) * 1.5).toFixed(2).toString().split(".").join(",")
); 

Exemplo.

 

Explicando a expressão (se necessário):

  1. Extrair o valor da distância ("descartando" unidade de medida)
  2. Trocar a vírgula (separador decimal) por um ponto de modo a poder calcular o preço.
  3. Voltar a formatar o preço de forma adequada para mostrar ao utilizador.
  • +1 1

Share this post


Link to post
Share on other sites

Ola amigo funcionou perfeitamente . surgiu um problema que ponho para pesquisar

DESTINO: Rua Alvaro de Carvalho - Anhagabau- SP

ORIGEM: Av. Teodoro Sampaio - SP

AGUARDE........

Fica aguardando e não da o resultado. mas quando pesquiso por estado funciona.

eu acho que me atrapalhei com alguma coisa.

Share this post


Link to post
Share on other sites

@hgkiller, que parte do cálculo é que não está correcto?

 

Se reparares, utilizei um multiplicador de 1.5 no exemplo. Terás que alterar esse valor para o que pretendes.

 

Para te podermos ajudar melhor, mostra o código que tens de momento.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Karoline Arias
      Olá, Boa tarde!
      Fizemos um redesign de um e-commerce nacional, onde inserimos recursos do Google Maps na página de localização de lojas deste varejista. O maps incorporado nesta página apresenta o mapa, porem não apresenta a localização do usuário e a marcação (marker) das lojas ou pins.
      Observação: Ao substituirmos a chave Google do varejista, pela chave Google do desenvolvedor, as marcações aparecerem normalmente. Será que pode estar faltando alguma configuração ou componente associado a chave/conta Google do varejista?
      Obrigada!

    • By isaque_cb2
      Bom, eu estou trabalhando em um app que depende de um mapa, gps e coisas do tipo, não é nada grande, e é mais pra estudos mesmo, quero conhecer melhor essa api, mais eu não encontro nenhum tutorial do tipo, todos que encontro são antigos e têm algum erro, alguém pode me ajudar? com tutoriais, dicas, video-aulas (que ainda funcionem...) eu já reproduzi vários, mais sempre tem um erro...
       
      grato por qualquer ajuda!
    • By brunoogm
      Pessoal estou desenvolvendo um sistema de vendas e gostaria de implementar um mapa ao site
      e nesse mapa gostaria que mostrasse a localização dos lugares com maior incidência de vendas.
       
      Queria dicas de por onde começar a minha pesquisa para implementar essa função.
      Ou se alguém puder me ajudar com algum código parecido que eu possa aprimorar a minha necessidade,
      VLW anjos.
    • By larissamilher
      Boa tarde, estou fazendo um site para uma cliente, ele tem interação com a api Google Maps plataform, quando o usuário está logado na sua conta do google fica aparecendo a foto dele no maps, a minha cliente gostaria que desativasse isso, eu expliquei que só a pessoa consegui vê e tudo, mas por ser um site restrito ela gostaria disso desativado. Gostaria de saber se tem como desativar isso por meio de código no wordpress. Segue abaixo a foto do mapa com a foto de perfil. Obrigada desde já.    Codigo do functions.php   add_shortcode('mapa', 'iframe_maps_api'); function iframe_maps_api($atts) {     $pais = $estado = $cidade = $bairro = $numero = '';     $pais   = str_replace( "-", "+", sanitize_title($atts['pais']) );     $estado = str_replace( "-", "+", sanitize_title($atts['estado']) );     $cidade = str_replace( "-", "+", sanitize_title($atts['cidade']) );     $bairro = str_replace( "-", "+", sanitize_title($atts['bairro']) );     $numero = str_replace( "-", "+", sanitize_title($atts['numero']) );     return '  <iframe id="maps_api"                                 src="https://www.google.com/maps/embed/v1/place?key='.$atts['key'].'&q='.$pais.','.$estado.','.$cidade.','.$bairro.','.$numero.'"                  allowfullscreen>            </iframe>';      } codigo da pagina que tem o maps <?php $cidade = get_dados_cadastro_anunciante('cidade');     $estado = get_dados_cadastro_anunciante('estado');     $bairro = get_dados_cadastro_anunciante('bairro');     if ( ! empty($cidade) && ! empty($estado) ) {         echo '<div class="box-mapa-iframe">';         echo do_shortcode('[mapa key="AIzaSyBBxZc2NLpikD63PndZ-LtHum2iYhkr1yw" pais="Brasil" estado="'.$estado.'" cidade="'.$cidade.'" bairro="'.$bairro.'"]');         echo '</div>';         echo '<div class="rota_como_chegar">                 <a href="https://www.google.com.br/maps/dir//Brasil,'.$cidade.','.$estado.','.$bairro.'/" target="_blank">Como Chegar <i class="fas fa-map-marker-alt"></i></a>             </div>'; ?>  
       
       
    • By Alan Quidornne
      Olá Amigos,
       
      Tenho enfrentado uma séria dificuldade ao utilizar o serviço "Autocomplete" do Google Maps API.
       
      Estou desenvolvendo um sistema de reserva de transfers(viagens de carro executivo) na qual o usuário informa a origem e destino de sua viagem e o sistema integrado com o Google Maps calcula o preço da viagem em questão .
       
      A dificuldade que estou tendo é limitar a exibição dos resultados do Autocomplete para locais restritos ao estado do Rio de Janeiro.
       
      Consigo tranquilamente limitar por país, mas para o território do Rio de Janeiro não consegui achar nenhuma função na documentação oficial que me atendesse nessa questão.
       
      Segue código do autocomplete.
      function initialize() { var options = { componentRestrictions: { country : "BR" } }; directionsService = new google.maps.DirectionsService(); var inputFrom = document.getElementById('from'); var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options); autocompleteFrom.addListener('place_changed', function() { var place = autocompleteFrom.getPlace(); placeId1 = place.place_id; }); var inputTo = document.getElementById('to'); var autocompleteTo = new google.maps.places.Autocomplete(inputTo, options); autocompleteTo.addListener('place_changed', function() { var place = autocompleteTo.getPlace(); placeId2 = place.place_id; }); } Se alguém souber e puder fazer a gentileza de me auxiliar nessa questão, ficarei bastante agradecido.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.