Simple multiplication in Javascript with decimal

Asked

Viewed 1,299 times

0

As seen in the topic Simple multiplication in Javascript, I was able to multiply by X30 the value Sponse.Rows[0]. Elements[0].distance.text in the Google Maps v3 script.

The Final Code looks like this:

<!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>

However, multiplication does not consider decimal places, only multiplying the whole numbers. How to do a multiplication considering the decimals? Thank you!

javascript google-maps

  • You use dots or commas for decimals?

3 answers

2

Renan, in this case you do not need to convert, because the Google API returns the text value and the numeric value. If you debug the return of the variable Sponse.Rows[0]. Elements[0]. Istance, will have the following return, Object { text: "152 km", value: 151648 }. However the numerical return is in meters, in case you want to work with the value in KM will only have to do the conversion, and following your example will be something like this:

<!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 by mentioning (I didn’t know) that this return of Google Maps already has a value: in meters, numerical.

0

You can use the function parseFloat instead of converting the variable to integer.

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

In that part:

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

0


I suggest you do a function for it so it doesn’t get messy.

If I remember the previous question this string has "430 Km", but in case you have "430,2 Km" then you need to change that comma to a point before you can use the parseFloat. You can do that with .replace(',','.');, that works even if you have a point initially.

Doing a function with that could be so:

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

and in the code you can use:

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

    Thank you Sergio! It worked perfectly!

Browser other questions tagged javascript google-maps

You are not signed in. Login or sign up in order to post.