Pesquisar na Comunidade
Mostrando resultados para as tags ''calculo automático''.
Encontrado 1 registro
-
Olá galera, tenho uma dúvida para me ajudarem quem souber, tenho um código de um mapa do google maps com origem e destino já setados por padrão, a pessoa coloca apenas os waypoints, então ele retorna as distâncias de um ponto até no outro, rota 1, rota 2 e rota 3, mas eu preciso calcular o valor total das 3 rotas, partida e chegada, e imprimir na tela este valor, por fim multiplicar automaticamente o resultado por R$0,75 e também por R$1,50 e imprimir na tela dizendo valor total, por exemplo se a distância total das 3 rotas forem 300Km, então seria 300Km X R$1,50 = R$450,00 e assim para R$0,75 também, alguém pode me ajudar? Segue o código completo abaixo, lembrando que precisa colocar a KEY no fim do código para poder fazer consulta e testar, porque o google coloca limite de consultas então cada KEY pode fazer uma determinada quantidade de consultas por dia, se poderem adicionar no código apenas o que preciso agreço desde já. <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Waypoints in directions</title> <style> #right-panel { font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #right-panel select, #right-panel input { font-size: 15px; } #right-panel select { width: 100%; } #right-panel i { font-size: 12px; } html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; float: left; width: 70%; height: 100%; } #right-panel { margin: 20px; border-width: 2px; width: 20%; height: 400px; float: left; text-align: left; padding-top: 0; } #directions-panel { margin-top: 10px; background-color: #FFEE77; padding: 10px; } </style> </head> <body> <div id="map"></div> <div id="right-panel"> <div> <p><b>Calcular valor do frete</b> <br> <i>Digite o nome da rua ou CEP de Partida e Chegada</i> <br> Partida <br> <input id="Text1" type="text" value=""" /><br> Chegada<br> <input id="Text2" type="text" value="" /> <br> <br> <input type="submit" id="submit" value="Calcular"> </p> </div> <div id="directions-panel"></div> </div> <script> function initMap() { var directionsService = new google.maps.DirectionsService; var directionsDisplay = new google.maps.DirectionsRenderer; var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: { lat: -26.453258, lng: -49.045733 } }); directionsDisplay.setMap(map); document.getElementById('submit').addEventListener('click', function () { calculateAndDisplayRoute(directionsService, directionsDisplay); }); } function calculateAndDisplayRoute(directionsService, directionsDisplay) { var waypts = []; var textbox1 = document.getElementById('Text1'); var textbox2 = document.getElementById('Text2'); if (textbox1.value != "") { waypts.push({ location: textbox1.value, stopover: true }); } if (textbox2.value != "") { waypts.push({ location: textbox2.value, stopover: true }); } directionsService.route({ origin: "Manoel Francisco da Costa", destination: "Manoel Francisco da Costa", waypoints: waypts, optimizeWaypoints: true, travelMode: 'DRIVING' }, function (response, status) { if (status === 'OK') { directionsDisplay.setDirections(response); var route = response.routes[0]; var summaryPanel = document.getElementById('directions-panel'); summaryPanel.innerHTML = ''; // For each route, display summary information. for (var i = 0; i < route.legs.length; i++) { var routeSegment = i + 1; summaryPanel.innerHTML += '<b>Rota: ' + routeSegment + '</b><br>'; summaryPanel.innerHTML += route.legs[i].start_address + ' to '; summaryPanel.innerHTML += route.legs[i].end_address + '<br>'; summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; } } else { window.alert('Directions request failed due to ' + status); } }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5-rk3dEwBvsYjFq1rlUP2LFKokUrtu_8&callback=initMap"> </script> </body> </html>