0

Como visto no tópico Multiplicação simples em JavaScript, consegui multiplicar por x30 o valor response.rows[0].elements[0].distance.text no script do Google Maps v3.

O Código final ficou assim:

<!DOCTYPE html>
<head><title>Cálculo de distância</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="content-language" content="pt-br" />
<script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
</head>
<body style="font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size:13px;">

<div style="border: 2px solid #747474; padding: 10px; width: 800px;">
    <form method="post" action="default.aspx?id=205" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')" id="form1">
    <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
                $('#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>R$</strong> <input style='border: none; font-size: 26px;' type='text' value='" + (parseInt(response.rows[0].elements[0].distance.text, 10) * 30) + "'>"
                    );
                //Atualizar o mapa
                $("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed");
            }
        }
		
    </script>
    <table width="736" border="0" cellpadding="2" class="contact fleft" style="margin: 0 0 10px">
    <tbody>
        <tr>
            <td width="215" align="left"><label for="txtOrigem"><strong>Endere&ccedil;o de origem
            </strong><br>
              <span style="color:#E41E26;">(ex: rua pedro joao coeli limeira)</span></label></td>
            <td width="308"><input style="padding:2px; border: 2px solid #747474; color: #747474; text-transform:uppercase; height: 30px;" type="text" class="field" id="txtOrigem" size="50" /></td>
            <td width="2" rowspan="2"><svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="80px" height="80px" viewBox="0 0 200.000000 200.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata></metadata>
<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M905 1990 c-417 -45 -766 -345 -867 -746 -33 -130 -33 -361 0 -489
91 -349 367 -627 709 -714 443 -113 881 70 1115 464 182 307 171 731 -27 1035
-63 96 -199 232 -295 295 -178 116 -429 177 -635 155z m325 -95 c36 -9 115
-41 175 -70 192 -93 327 -228 420 -420 77 -158 90 -218 90 -405 0 -181 -13
-244 -81 -388 -96 -206 -240 -350 -445 -446 -145 -68 -208 -81 -389 -81 -131
0 -168 4 -235 23 -470 134 -753 580 -670 1057 65 369 343 654 726 740 85 19
319 14 409 -10z"/>
<path d="M1220 1866 c0 -4 9 -25 20 -47 101 -198 144 -475 93 -605 -27 -68
-65 -116 -121 -155 -38 -26 -42 -30 -19 -25 15 4 27 4 27 2 0 -3 -12 -12 -27
-21 -27 -15 -27 -16 -3 -10 14 4 43 19 65 34 161 109 227 461 124 663 -11 21
-21 38 -23 38 -1 0 3 -28 10 -62 8 -35 13 -83 13 -108 0 -45 0 -44 -22 30 -23
78 -83 204 -117 248 -11 13 -20 22 -20 18z"/>
<path d="M1524 1542 c-2 -142 -14 -222 -50 -331 -45 -135 -130 -232 -229 -261
-22 -7 -49 -16 -60 -20 -17 -7 -16 -9 10 -10 26 -1 27 -3 10 -10 -20 -8 -20
-9 1 -9 68 -3 177 68 250 163 102 130 145 242 143 376 l-1 75 -18 -82 c-11
-46 -23 -89 -27 -97 -4 -8 -8 54 -8 137 -1 84 -5 162 -10 174 -7 15 -10 -15
-11 -105z"/>
<path d="M947 1372 c-20 -45 -57 -80 -94 -87 -12 -3 -34 -7 -47 -10 -14 -3
-28 -16 -36 -34 -6 -16 -20 -37 -31 -47 -11 -10 -19 -30 -19 -47 0 -28 1 -29
13 -13 14 19 37 19 108 1 18 -5 31 -1 42 10 27 26 20 36 -12 18 -27 -16 -30
-16 -55 0 -29 20 -35 57 -11 77 9 8 30 11 55 7 31 -4 40 -2 40 10 0 8 11 24
24 34 26 20 50 77 44 105 -2 11 -10 1 -21 -24z"/>
<path d="M235 1380 c20 -72 82 -174 153 -252 55 -61 27 -44 -51 30 -70 67 -75
68 -28 2 l25 -35 -33 30 c-63 56 -16 -8 52 -71 186 -175 522 -230 657 -108 46
42 70 89 70 141 0 51 -29 83 -73 83 l-32 -1 27 -15 c80 -43 8 -180 -113 -214
-181 -52 -443 101 -609 356 -28 43 -48 68 -45 54z"/>
<path d="M1655 1358 c-2 -7 -12 -35 -21 -63 -46 -142 -138 -295 -213 -354 -57
-46 -126 -73 -187 -74 -44 -2 -51 -4 -38 -14 14 -10 13 -12 -3 -16 -37 -10 64
-6 107 4 149 34 348 230 374 369 7 32 5 31 -24 -20 -17 -30 -40 -64 -51 -75
-16 -17 -15 -9 9 45 25 56 38 99 57 193 4 20 -3 23 -10 5z"/>
<path d="M292 1086 c19 -36 110 -145 136 -162 13 -8 21 -18 18 -21 -3 -3 -27
10 -53 29 -74 53 -79 54 -49 16 67 -88 201 -149 331 -151 84 -1 143 19 176 59
12 15 12 17 0 9 -11 -6 -13 -4 -8 8 4 11 -3 9 -30 -8 -114 -78 -257 -31 -430
141 -56 55 -97 92 -91 80z"/>
<path d="M1036 831 c-94 -128 -117 -280 -70 -466 16 -63 54 -158 60 -152 2 2
-5 30 -16 62 -30 86 -24 101 8 20 27 -68 90 -177 110 -189 6 -3 -9 28 -33 69
-76 133 -123 316 -110 425 8 66 35 138 70 191 34 52 23 50 -15 -3 -42 -57 -38
-31 5 32 46 68 39 76 -9 11z"/>
<path d="M410 841 c19 -18 62 -45 94 -61 64 -32 56 -39 -15 -15 l-44 15 24
-20 c69 -59 255 -66 350 -15 51 28 95 75 66 71 -8 -1 -22 -9 -32 -18 -81 -71
-241 -63 -383 19 -25 15 -56 33 -70 41 -17 10 -14 4 10 -17z"/>
<path d="M935 759 c-37 -73 -65 -191 -65 -273 0 -74 31 -233 50 -264 11 -16
11 -16 6 1 -3 9 -8 48 -11 85 l-5 67 15 -49 c23 -69 27 -52 9 35 -22 107 -15
313 13 392 12 31 20 57 17 57 -2 0 -15 -23 -29 -51z"/>
<path d="M1050 746 c-23 -61 -31 -149 -20 -219 10 -72 59 -186 100 -237 17
-22 17 -17 -5 33 -30 68 -33 95 -6 51 30 -50 48 -53 19 -3 -61 105 -96 259
-80 348 10 55 7 66 -8 27z"/>
</g>
</svg></td>
        </tr>
        <tr>
            <td align="left"><label for="txtDestino"><strong>Endere&ccedil;o de destino
            </strong><br>
              <span style="color:#E41E26;">(ex: av brasil rio de janeiro)</span></label></td>
            <td><input type="text" class="field" id="txtDestino" style="padding:2px; border: 2px solid #747474; color: #747474; text-transform:uppercase; height: 30px;" value="R. Gen. Rondon, 538 - Vila Labaki, SP, 13486-442, Brasil" size="50" /></td>
        </tr>
        <tr>
          <td colspan="3"><hr><span id="litResultado">&nbsp;</span></td>
        </tr>
        <tr>
          <td><input style="padding:5px; border: 2px solid red; font-weight:bold; color: #FFF; background-color: #E41E26; cursor: pointer;" type="button" class="btnNew" onClick="CalculaDistancia()" value="Calcular" /></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
    


<div style="padding: 10px 0 0; clear: both"><iframe width="795" scrolling="no" height="500" frameborder="0" src="https://maps.google.com/maps?saddr=rua pedro joao coeli 223 limeira&amp;daddr=rua gen rondon 538 limeira&amp;output=embed" marginwidth="0" marginheight="0" id="map" style="border: 2px solid #747474;"></iframe><center><small>2015 &copy; Fênix Guinchos</small></center></div>
           
<script type="text/javascript">
//<![CDATA[

theForm.oldSubmit = theForm.submit;
theForm.submit = WebForm_SaveScrollPositionSubmit;

theForm.oldOnSubmit = theForm.onsubmit;
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
WebForm_AutoFocus('btnSearch');//]]>
</script>
</form>
</div>
</body>
</html>

Contudo, a multiplicação não considera as casas decimais, multiplicando somente os números inteiros. Como fazer uma multiplicação considerando os decimais? Obrigado!

1
  • Usas ponto ou virgula para os decimais?
    – Sergio
    Commented 29/12/2014 às 18:53

3 Respostas 3

2

Renan, neste caso você não precisa fazer conversão, pois a API do Google retorna o valor em texto e o valor numérico. Se você debugar o retorno da variável response.rows[0].elements[0].distance, terá o seguinte retorno, Object { text: "152 km", value: 151648 }. No entanto o retorno numérico está em metros, caso você queira trabalhar com o valor em KM só terá que fazer a conversão, e seguindo seu exemplo ficará algo assim:

<!DOCTYPE html>
<head><title>Cálculo de distância</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="content-language" content="pt-br" />
<script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
</head>
<body style="font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size:13px;">

<div style="border: 2px solid #747474; padding: 10px; width: 800px;">
    <form method="post" action="default.aspx?id=205" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')" id="form1">
    <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
                $('#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>R$</strong> <input style='border: none; font-size: 26px;' type='text' value='" + ((response.rows[0].elements[0].distance.value)/1000 * 30) + "'>"
                    );
                //Atualizar o mapa
                $("#map").attr("src", "https://maps.google.com/maps?saddr=" + response.originAddresses + "&daddr=" + response.destinationAddresses + "&output=embed");
            }
        }
		
    </script>
    <table width="736" border="0" cellpadding="2" class="contact fleft" style="margin: 0 0 10px">
    <tbody>
        <tr>
            <td width="215" align="left"><label for="txtOrigem"><strong>Endere&ccedil;o de origem
            </strong><br>
              <span style="color:#E41E26;">(ex: rua pedro joao coeli limeira)</span></label></td>
            <td width="308"><input style="padding:2px; border: 2px solid #747474; color: #747474; text-transform:uppercase; height: 30px;" type="text" class="field" id="txtOrigem" size="50" /></td>
            <td width="2" rowspan="2"><svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="80px" height="80px" viewBox="0 0 200.000000 200.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata></metadata>
<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M905 1990 c-417 -45 -766 -345 -867 -746 -33 -130 -33 -361 0 -489
91 -349 367 -627 709 -714 443 -113 881 70 1115 464 182 307 171 731 -27 1035
-63 96 -199 232 -295 295 -178 116 -429 177 -635 155z m325 -95 c36 -9 115
-41 175 -70 192 -93 327 -228 420 -420 77 -158 90 -218 90 -405 0 -181 -13
-244 -81 -388 -96 -206 -240 -350 -445 -446 -145 -68 -208 -81 -389 -81 -131
0 -168 4 -235 23 -470 134 -753 580 -670 1057 65 369 343 654 726 740 85 19
319 14 409 -10z"/>
<path d="M1220 1866 c0 -4 9 -25 20 -47 101 -198 144 -475 93 -605 -27 -68
-65 -116 -121 -155 -38 -26 -42 -30 -19 -25 15 4 27 4 27 2 0 -3 -12 -12 -27
-21 -27 -15 -27 -16 -3 -10 14 4 43 19 65 34 161 109 227 461 124 663 -11 21
-21 38 -23 38 -1 0 3 -28 10 -62 8 -35 13 -83 13 -108 0 -45 0 -44 -22 30 -23
78 -83 204 -117 248 -11 13 -20 22 -20 18z"/>
<path d="M1524 1542 c-2 -142 -14 -222 -50 -331 -45 -135 -130 -232 -229 -261
-22 -7 -49 -16 -60 -20 -17 -7 -16 -9 10 -10 26 -1 27 -3 10 -10 -20 -8 -20
-9 1 -9 68 -3 177 68 250 163 102 130 145 242 143 376 l-1 75 -18 -82 c-11
-46 -23 -89 -27 -97 -4 -8 -8 54 -8 137 -1 84 -5 162 -10 174 -7 15 -10 -15
-11 -105z"/>
<path d="M947 1372 c-20 -45 -57 -80 -94 -87 -12 -3 -34 -7 -47 -10 -14 -3
-28 -16 -36 -34 -6 -16 -20 -37 -31 -47 -11 -10 -19 -30 -19 -47 0 -28 1 -29
13 -13 14 19 37 19 108 1 18 -5 31 -1 42 10 27 26 20 36 -12 18 -27 -16 -30
-16 -55 0 -29 20 -35 57 -11 77 9 8 30 11 55 7 31 -4 40 -2 40 10 0 8 11 24
24 34 26 20 50 77 44 105 -2 11 -10 1 -21 -24z"/>
<path d="M235 1380 c20 -72 82 -174 153 -252 55 -61 27 -44 -51 30 -70 67 -75
68 -28 2 l25 -35 -33 30 c-63 56 -16 -8 52 -71 186 -175 522 -230 657 -108 46
42 70 89 70 141 0 51 -29 83 -73 83 l-32 -1 27 -15 c80 -43 8 -180 -113 -214
-181 -52 -443 101 -609 356 -28 43 -48 68 -45 54z"/>
<path d="M1655 1358 c-2 -7 -12 -35 -21 -63 -46 -142 -138 -295 -213 -354 -57
-46 -126 -73 -187 -74 -44 -2 -51 -4 -38 -14 14 -10 13 -12 -3 -16 -37 -10 64
-6 107 4 149 34 348 230 374 369 7 32 5 31 -24 -20 -17 -30 -40 -64 -51 -75
-16 -17 -15 -9 9 45 25 56 38 99 57 193 4 20 -3 23 -10 5z"/>
<path d="M292 1086 c19 -36 110 -145 136 -162 13 -8 21 -18 18 -21 -3 -3 -27
10 -53 29 -74 53 -79 54 -49 16 67 -88 201 -149 331 -151 84 -1 143 19 176 59
12 15 12 17 0 9 -11 -6 -13 -4 -8 8 4 11 -3 9 -30 -8 -114 -78 -257 -31 -430
141 -56 55 -97 92 -91 80z"/>
<path d="M1036 831 c-94 -128 -117 -280 -70 -466 16 -63 54 -158 60 -152 2 2
-5 30 -16 62 -30 86 -24 101 8 20 27 -68 90 -177 110 -189 6 -3 -9 28 -33 69
-76 133 -123 316 -110 425 8 66 35 138 70 191 34 52 23 50 -15 -3 -42 -57 -38
-31 5 32 46 68 39 76 -9 11z"/>
<path d="M410 841 c19 -18 62 -45 94 -61 64 -32 56 -39 -15 -15 l-44 15 24
-20 c69 -59 255 -66 350 -15 51 28 95 75 66 71 -8 -1 -22 -9 -32 -18 -81 -71
-241 -63 -383 19 -25 15 -56 33 -70 41 -17 10 -14 4 10 -17z"/>
<path d="M935 759 c-37 -73 -65 -191 -65 -273 0 -74 31 -233 50 -264 11 -16
11 -16 6 1 -3 9 -8 48 -11 85 l-5 67 15 -49 c23 -69 27 -52 9 35 -22 107 -15
313 13 392 12 31 20 57 17 57 -2 0 -15 -23 -29 -51z"/>
<path d="M1050 746 c-23 -61 -31 -149 -20 -219 10 -72 59 -186 100 -237 17
-22 17 -17 -5 33 -30 68 -33 95 -6 51 30 -50 48 -53 19 -3 -61 105 -96 259
-80 348 10 55 7 66 -8 27z"/>
</g>
</svg></td>
        </tr>
        <tr>
            <td align="left"><label for="txtDestino"><strong>Endere&ccedil;o de destino
            </strong><br>
              <span style="color:#E41E26;">(ex: av brasil rio de janeiro)</span></label></td>
            <td><input type="text" class="field" id="txtDestino" style="padding:2px; border: 2px solid #747474; color: #747474; text-transform:uppercase; height: 30px;" value="R. Gen. Rondon, 538 - Vila Labaki, SP, 13486-442, Brasil" size="50" /></td>
        </tr>
        <tr>
          <td colspan="3"><hr><span id="litResultado">&nbsp;</span></td>
        </tr>
        <tr>
          <td><input style="padding:5px; border: 2px solid red; font-weight:bold; color: #FFF; background-color: #E41E26; cursor: pointer;" type="button" class="btnNew" onClick="CalculaDistancia()" value="Calcular" /></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
    


<div style="padding: 10px 0 0; clear: both"><iframe width="795" scrolling="no" height="500" frameborder="0" src="https://maps.google.com/maps?saddr=rua pedro joao coeli 223 limeira&amp;daddr=rua gen rondon 538 limeira&amp;output=embed" marginwidth="0" marginheight="0" id="map" style="border: 2px solid #747474;"></iframe><center><small>2015 &copy; Fênix Guinchos</small></center></div>
           
<script type="text/javascript">
//<![CDATA[

theForm.oldSubmit = theForm.submit;
theForm.submit = WebForm_SaveScrollPositionSubmit;

theForm.oldOnSubmit = theForm.onsubmit;
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
WebForm_AutoFocus('btnSearch');//]]>
</script>
</form>
</div>
</body>
</html>

1
  • +1 por referir (eu não sabia) que esse retorno do Google Maps já tem um value: em metros, numérico.
    – Sergio
    Commented 29/12/2014 às 19:02
0

Sugiro fazeres uma função para isso para não ficar confuso.

Se me lembro da pergunta anterior essa string tem "430 Km", mas no caso de teres "430,2 Km" então tens de mudar essa virgula para ponto antes de poderes usar o parseFloat. Podes fazer isso com .replace(',','.');, que funciona mesmo que tenhas um ponto inicialmente.

Fazendo uma função com isso poderia ser assim:

function multiplicar(string, multiplicador){
    var numero = string.replace(',','.');
    return parseFloat(numero) * multiplicador;
}

e no código podes usar:

"<br /><strong>R$</strong> <input style='border: none; font-size: 26px;' type='text' value='" + multiplicar(response.rows[0].elements[0].distance.text, 30) + "'>"
1
  • 1
    Muito Obrigado Sergio! Funcionou perfeitamente!
    – user20098
    Commented 30/12/2014 às 11:09
0

Você pode usar a função parseFloat ao invés de converter a variável pra inteiro.

var exemplo = "30.4";
alert("Int: " + parseInt(exemplo) * 30);
alert("Float: " + parseFloat(exemplo) * 30);

Nessa parte:

<strong>R$</strong> <input style='border: none; font-size: 26px;' type='text' value='" + (parseFloat(response.rows[0].elements[0].distance.text) * 30) + "'>"

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