5

Não tenho muita experiência com javascript e não tenho ideia de como pegar o resultado desse script e passar para um campo <input text>. Esse script calcula a distância e o tempo entre dois pontos. Então queria pegar o tempo e a distância e então salvá-lo em um banco de dados.

<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<!-- Parâmetro sensor é utilizado somente em dispositivos com GPS -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<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
            var x = response.rows[0].elements[0].distance.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">
       <label for="txtOrigem"><strong>Endere&ccedil;o de origem</strong></label>
       <input type="text" id="txtOrigem" class="field" style="width: 400px" />
       <label for="txtDestino"><strong>Endere&ccedil;o de destino</strong></label>
       <input type="text" style="width: 400px" class="field" id="txtDestino" />
       <input type="button" value="Calcular dist&acirc;ncia"  onclick="CalculaDistancia()" class="btnNew" />
  <div><span id="litResultado">&nbsp;</span></div>

  <!------------------------------------------------------------------->
    <input type="text" value="<? Variavel distancia?>"  
    <input type="text" value="<? Variavel tempo?>"  
  <!------------------------------------------------------------------->

 <div style="padding: 10px 0 0; clear: both">
    <iframe width="750" scrolling="no" height="350" frameborder="0" id="map" 
  marginheight="0" marginwidth="0" src="https://maps.google.com/maps?saddr=são 
 paulo&daddr=rio de janeiro&output=embed"></iframe>
</div>
2
  • Só dando uma olhada por cima, eu vi que há um elemento <table> não-fechado que não contém linhas e colunas dentro dele. Isso está certo? Além disso, o seu HTML não está completo, uma vez que não tem o </body> e nem o </html>. Commented 5/02/2015 às 4:22
  • Mais Ta funcionando sim. Na verdade ele não vai ter nem tabela Commented 5/02/2015 às 4:28

1 Resposta 1

10

Acho que consegui resolver.

Primeiro eu corrigi os problemas com a HTML mal formada: Está faltando o </body> e o </html> no final, que acrescentei. Você tem um elemento <table> sobrando que é inútil, e eu o removi. Você está quebrando linha dentro do atributo src do <iframe> e isso é ruim, e eu não quebrei linha ali. Além disso, eu acrescentei o <!DOCTYPE html> e o <meta charset="utf-8">. Por fim, dei um jeito em alguns escapes que estavam faltando (â para &acirc; e ã para &atilde;).

Depois, eu acrescentei os campos onde o resultado será colocado. Também separei-os dos campos onde a pesquisa é realizada. Fiz os campos do resultado serem somente-leitura para garantir que o resultado deles de fato venha do Google (no entanto, não confie nisso se você for disponibilizar para o público em geral). Coloquei todos eles dentro de um <form> com um botão submit para poder enviar ao servidor posteriormente:

EDIT: Em 11/06/2018, mais de três anos depois da data em que esta pergunta e esta resposta foram postadas, o Google mudou o formato da API. Até então, era possível utilizar a API gratuitamente sem necessitar de uma API Key. Com a mudança, torna-se necessário o uso de uma API Key, que só pode ser ativada com um cartão de crédito. Veja mais neste link, nesta página e aqui. Nos códigos que se segue, substitua o API_KEY_AQUI pelo valor do seu API Key. E para usar o seu API Key, você deverá ativá-lo.

    <form action="http://www.example.com/url" method="post">
      <div><span>Pesquisa:</span></div>
      <label for="txtOrigem"><strong>Endere&ccedil;o de origem</strong></label>
      <input name="pesquisaOrigem" type="text" id="txtOrigem" class="field" style="width: 400px" value="S&atilde;o Paulo" />
      <label for="txtDestino"><strong>Endere&ccedil;o de destino</strong></label>
      <input name="pesquisaDestino" type="text" id="txtDestino" class="field" style="width: 400px" value="Rio de Janeiro" />
      <input type="button" value="Calcular dist&acirc;ncia" onclick="CalculaDistancia()" class="btnNew" />
      <div><span id="litResultado">&nbsp;</span></div>

      <div><span>Resposta:</span></div>
      <label for="txtOrigemResultado"><strong>Endere&ccedil;o de origem</strong></label>
      <input name="resultadoOrigem" readonly="readonly" type="text" id="txtOrigemResultado" class="field" style="width: 400px" value="" />
      <label for="txtDestinoResultado"><strong>Endere&ccedil;o de destino</strong></label>
      <input name="resultadoDestino" readonly="readonly" type="text" id="txtDestinoResultado" class="field" style="width: 400px" value="" />
      <br />
      <label for="txtDistancia"><strong>Dist&acirc;ncia</strong></label>
      <input name="distancia" readonly="readonly" type="text" id="txtDistancia" value="" /> 
      <label for="txtTempo"><strong>Tempo</strong></label>
      <input name="tempo" readonly="readonly" type="text" id="txtTempo" value="" />
      <input type="submit" value="Enviar para o servidor" />
    </form>

Arrumei o javascript para preencher estes campos no callback. Já aproveitei para retirar o "aguarde" quando a resposta chegar e também traduzi o tempo para o português.

      // 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".
            $("#litResultado").html("&nbsp;"); // Remove o "aguarde".

            // Popula os campos.
            $("#txtOrigemResultado").val(response.originAddresses);
            $("#txtDestinoResultado").val(response.destinationAddresses);
            $("#txtDistancia").val(response.rows[0].elements[0].distance.text);
            var tempo = response.rows[0].elements[0].duration.text;
            tempo = tempo.replace("day", "dia").replace("hour", "hora").replace("min", "minuto");
            $("#txtTempo").val(tempo);

            //Atualizar o mapa.
            $("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed&key=API_KEY_AQUI");
        }
      }

Eis o HTML completo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Calcular dist&acirc;ncia entre cidades (mapas e rotas)</title>
    <script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- Parâmetro sensor é utilizado somente em dispositivos com GPS -->
    <script src="http://maps.google.com/maps/api/js?sensor=false&key=API_KEY_AQUI"></script>
    <script type="text/javascript">
      function CalculaDistancia() {
        $('#litResultado').html('Aguarde...');
        // Instancia o DistanceMatrixService.
        var service = new google.maps.DistanceMatrixService();
        // Executa o DistanceMatrixService.
        service.getDistanceMatrix({
            origins: [$("#txtOrigem").val()], // Origem
            destinations: [$("#txtDestino").val()], // Destino
            travelMode: google.maps.TravelMode.DRIVING, // Modo (DRIVING | WALKING | BICYCLING)
            unitSystem: google.maps.UnitSystem.METRIC // Sistema de medida (METRIC | IMPERIAL)
        }, callback); // Vai chamar o 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".
            $("#litResultado").html("&nbsp;"); // Remove o "aguarde".

            // Popula os campos.
            $("#txtOrigemResultado").val(response.originAddresses);
            $("#txtDestinoResultado").val(response.destinationAddresses);
            $("#txtDistancia").val(response.rows[0].elements[0].distance.text);
            var tempo = response.rows[0].elements[0].duration.text;
            tempo = tempo.replace("day", "dia").replace("hour", "hora").replace("min", "minuto");
            $("#txtTempo").val(tempo);

            //Atualizar o mapa.
            $("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed&key=API_KEY_AQUI");
        }
      }
    </script>

    <form action="http://www.example.com/url" method="post">
      <div><span>Pesquisa:</span></div>
      <label for="txtOrigem"><strong>Endere&ccedil;o de origem</strong></label>
      <input name="pesquisaOrigem" type="text" id="txtOrigem" class="field" style="width: 400px" value="S&atilde;o Paulo" />
      <label for="txtDestino"><strong>Endere&ccedil;o de destino</strong></label>
      <input name="pesquisaDestino" type="text" id="txtDestino" class="field" style="width: 400px" value="Rio de Janeiro" />
      <input type="button" value="Calcular dist&acirc;ncia" onclick="CalculaDistancia()" class="btnNew" />
      <div><span id="litResultado">&nbsp;</span></div>

      <div><span>Resposta:</span></div>
      <label for="txtOrigemResultado"><strong>Endere&ccedil;o de origem</strong></label>
      <input name="resultadoOrigem" readonly="readonly" type="text" id="txtOrigemResultado" class="field" style="width: 400px" value="" />
      <label for="txtDestinoResultado"><strong>Endere&ccedil;o de destino</strong></label>
      <input name="resultadoDestino" readonly="readonly" type="text" id="txtDestinoResultado" class="field" style="width: 400px" value="" />
      <br />
      <label for="txtDistancia"><strong>Dist&acirc;ncia</strong></label>
      <input name="distancia" readonly="readonly" type="text" id="txtDistancia" value="" /> 
      <label for="txtTempo"><strong>Tempo</strong></label>
      <input name="tempo" readonly="readonly" type="text" id="txtTempo" value="" />
      <input type="submit" value="Enviar para o servidor" />
    </form>

    <div style="padding: 10px 0 0; clear: both">
      <iframe width="750" scrolling="no" height="350" frameborder="0" id="map" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?saddr=S&atilde;o Paulo&daddr=Rio de Janeiro&output=embed"></iframe>
    </div>
  </head>
</html>

Para usar, você deve proceder assim:

  1. Você escolhe os locais desejados e os preenche nos campos de pesquisa.
  2. Clique no botão "Calcular distância".
  3. O Google trará o resultado.
  4. O javascript preencherá os campos do formulário com os resultados.
  5. Você clica no botão "Enviar para o servidor" e os dados do formulário serão enviados ao servidor.

No servidor, você vai receber uma requisição POST contendo os seguintes campos de formulário: pesquisaOrigem, pesquisaDestino, resultadoOrigem, resultadoDestino, distancia e tempo. O significado de cada um deles é óbvio. A URL responsável por receber este serviço deverá ser configurada no seu servidor e o campo action do seu <form> no HTML deve coincidir com ela.

Se preferir, você pode fazer com que a resposta OK do Google já submeta o resultado via AJAX para o seu servidor automaticamente. Ou então você pode querer colocar alguma lógica de validação mais complexa no seu botão "Enviar para o servidor". Neste caso, se você tiver alguma dúvida de como fazer isso, já fica para o escopo de uma outra pergunta, mas nada te impede de adaptar este processo como lhe convier.

Já no servidor, você executará um prepared statement com uma instrução SQL mais ou menos assim:

INSERT INTO Distancias (pesquisaOrigem, pesquisaDestino, resultadoOrigem, resultadoDestino, distancia, tempo) VALUES (?, ?, ?, ?, ?, ?)

Ou simplesmente assim:

INSERT INTO Distancias (origem, destino, distancia, tempo) VALUES (?, ?, ?, ?)

E então é só preencher os parâmetros do seu prepared statement com os dados recebidos do formulário. No entanto, antes de fazê-lo, talvez você queira pré-processá-los para converter todos os tempos em minutos, converter todas as distâncias em valores numéricos (eliminando o sufixo " km"), e talvez dando alguma arrumada na origem e no destino caso queira eliminar informações que você julgue desnecessárias como número de rua, CEP, diferenças entre maiúsculas/minúsculas, ou o que você quiser.

2
  • 2
    muito bom o que vi aqui, tive a resposta que procurava!
    – user34078
    Commented 13/10/2015 às 16:42
  • eu estou usando seu código em um sistema, mas estou com um problema, está retornando um erro após alguns testes que fiz, esperei 10 min e o erro continua: OVER_QUERY_LIMIT
    – Wendell
    Commented 28/11/2017 às 23:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .