{"id":57552,"date":"2018-07-10T14:30:11","date_gmt":"2018-07-10T14:30:11","guid":{"rendered":"http:\/\/www.joaoleitao.com\/viagens\/?page_id=57552"},"modified":"2020-08-30T09:35:40","modified_gmt":"2020-08-30T09:35:40","slug":"calculador-de-distancias","status":"publish","type":"post","link":"https:\/\/www.joaoleitao.com\/viagens\/calculador-de-distancias\/","title":{"rendered":"Calculador de Dist\u00e2ncias Rodovi\u00e1rias"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u00cdndice<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69d6a0fc5403c\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69d6a0fc5403c\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.joaoleitao.com\/viagens\/calculador-de-distancias\/#Calculador_de_Distancias\" >Calculador de Dist\u00e2ncias<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.joaoleitao.com\/viagens\/calculador-de-distancias\/#Distances_setDistance_Time_setTime\" >Distances: '+setDistance+' &nbsp;&nbsp;&nbsp;&nbsp; Time: '+setTime+'<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1418\" height=\"780\" src=\"https:\/\/www.joaoleitao.com\/viagens\/wp-content\/uploads\/2018\/07\/Calculador-de-Distancias-1.jpg\" alt=\"Calculador de Dist\u00e2ncias\" class=\"wp-image-64075\" srcset=\"https:\/\/www.joaoleitao.com\/viagens\/wp-content\/uploads\/2018\/07\/Calculador-de-Distancias-1.jpg 1418w, https:\/\/www.joaoleitao.com\/viagens\/wp-content\/uploads\/2018\/07\/Calculador-de-Distancias-1-768x422.jpg 768w\" sizes=\"auto, (max-width: 1418px) 100vw, 1418px\" \/><figcaption>Calculador de Dist\u00e2ncias<\/figcaption><\/figure>\n\n\n\n<p>Bem-vindos ao calculador de dist\u00e2ncias rodovi\u00e1rias personalizado, \u00fatil para quem viaja de carro, mota, autocaravana, e bicicleta. Este calculador de dist\u00e2ncias \u00e9 uma ferramenta \u00fatil para saber as dist\u00e2ncias por estrada entre cidades, e mostrar um mapa com o itiner\u00e1rio em tempo real. Para usar esta ferramenta de viagem, escolha a cidade de partida e chegada, o tipo de viagem, e pressione \u00ab Calcular \u00bb.<\/p>\n\n\n\n<h2 class=\"has-text-align-center title2 wp-block-heading\"><span class=\"ez-toc-section\" id=\"Calculador_de_Distancias\"><\/span>Calculador de Dist\u00e2ncias<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"\/>\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"><\/script>\n\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script>\n    <style>\n        #map_canvas {\n            width:100%;\n            height:520px;\n        }\n.row {\n  content: \"\";\n  clear: both;\n}\n\t\t\n\t.col  {\n    float: left;\n    width: 22%;\n    padding: 10px;\n}\n\t\n@media screen and (max-width: 600px) {\n  .col {\n    width: 100%;\n  }\n}\n\t\t\n.btn {\n  background: #09c;\t\n  border-radius: 4px;\n  border: none;\n  color: #fff;\n  text-align: center;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 16px;\n  margin: 4px 2px;\n  cursor: pointer;\n  -webkit-transition-duration: 0.4s; \/* Safari *\/\n  transition-duration: 0.4s;\n}\n \n.btn:focus, .btn:active:focus, .btn.active:focus {\n    outline: 0 none;\n}\n \n.btn-primary {\n    background: #0099cc;\n    color: #ffffff;\n}\n \n.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {\n    box-shadow: 0 10px 14px 0 rgba(0,0,0,0.24), 0 12px 40px 0 rgba(0,0,0,0.19);\n}\n \n.btn-primary:active, .btn-primary.active {\n    background: #007299;\n    box-shadow: none;\n}\n\n\ninput[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=tel], input[type=number], textarea, select {\n width: 100%;\n}\n    <\/style>\n\n\t\t<main role=\"main\">\n      <div class=\"container\">\n        <!-- Example row of columns -->\n        <div class=\"row\">\n          <div class=\"col\">\n            <div for=\"\">Cidade de Partida<\/div>\n            <input type=\"text\" class=\"form-control mr-sm-2\" name=\"sourceAddress\" id=\"sourceAddress\" placeholder=\"Nome da cidade...\"\/>\n          <\/div>\n          <div class=\"col\">\n            <div for=\"\">Cidade de Chegada<\/div>\n            <input type=\"text\" class=\"form-control mr-sm-2\" name=\"destinationAddress\" id=\"destinationAddress\" placeholder=\"Nome da cidade...\"\/>\n          <\/div>\n          <div class=\"col\">\n                <div for=\"\">Tipo de Transporte<\/div>\n                <select id=\"travelMode\" class=\"form-control\">\n                    <option selected=\"selected\" value=\"Driving\">Conduzir<\/option>\n                    <option value=\"Transit\">Comboio<\/option>\n                <\/select>\n          <\/div>\n          <div class=\"col\">\n                <div for=\"\">Km\/Mi<\/div>\n                <select id=\"unit\" class=\"form-control\">\n                    <option value=\"km\">Quil\u00f3metros<\/option>\n                    <option value=\"miles\">Milhas<\/option>\n                <\/select>\n          <\/div>\n          <div class=\"col-md-12\" style=\"text-align: center;clear: both;\">\n                <br \/>\n                <button onclick=\"calculateAndDisplayRoute()\" type=\"button\" class=\"btn btn-primary btn-lg\">Calcular dist\u00e2ncia<\/button>\n                <button onclick=\"resetAll()\" class=\"btn btn-primary btn-lg\"><i class=\"fa fa-refresh\"><\/i><\/button><br \/><br \/>\n          <\/div>\n          <div class=\"col-md-12 map_canvasContainer\">\n            <div id=\"distancetimeContainer\" style=\"display: none;\"><\/div>\n          <\/div>\n          <div class=\"col-md-12 map_canvasContainer\">\n            <div id=\"map_canvas\"><\/div>\n          <\/div>        \n        <\/div>\n\t <\/div>\n    <\/main>\n    <footer class=\"container\">\n    <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyB6xWTbMsBuNd0Nq3dspqfSS7sSDmF7u3o&amp;libraries=places,geometry\"><\/script>\n<script>\nvar defaultSourceAddress = '';\nvar startLocLatitude = '';\nvar startLocLongitude = '';\n$(document).ready(function(){\n    initMap();\n});\nvar map, directionsService, directionsDisplay;\nfunction initMap() {\n    directionsService = new google.maps.DirectionsService();\n    directionsDisplay = new google.maps.DirectionsRenderer();\n    var setZoom = 7;\n\n    if(defaultSourceAddress == '' || (startLocLatitude == '' || startLocLongitude == '')){\n       startLocLatitude = '20.90000'; \n       startLocLongitude = '0.000000'; \n       setZoom = 2;\n    }\n    map = new google.maps.Map(document.getElementById('map_canvas'), {\n        zoom: setZoom,\n        center: {lat: parseFloat(startLocLatitude), lng: parseFloat(startLocLongitude)}\n    });\n    directionsDisplay.setMap(map);\n\n    var autocomplete = new google.maps.places.Autocomplete((\n            document.getElementById('sourceAddress')), { });\n    autocomplete.addListener('place_changed', function() {\n          var place = autocomplete.getPlace();\n          if (!place.geometry) {\n            window.alert(\"No details available for input: '\" + place.name + \"', Please choose and address from autocomplete!\");\n            return;\n          }\n\n          var lat = place.geometry.location.lat();\n          var lng = place.geometry.location.lng();\n\n          map.setCenter({lat: parseFloat(lat), lng: parseFloat(lng)});\n\n    });\n    var autocomplete2 = new google.maps.places.Autocomplete((\n            document.getElementById('destinationAddress')), {});\n    $('#sourceAddress').val(defaultSourceAddress);\n}\n\nfunction calculateAndDisplayRoute() {\n    var getMode = $('#travelMode').val();\n    directionsService.route({\n        origin: document.getElementById('sourceAddress').value,\n        destination: document.getElementById('destinationAddress').value,\n        travelMode: getMode.toUpperCase() \/\/'DRIVING'\n    }, function(response, status) {\n        if (status === 'OK') {\n            directionsDisplay.setDirections(response);\n\n            var getDuration = response.routes[0].legs[0].duration.value; \/\/ in seconds\n            var getDistance = response.routes[0].legs[0].distance.value;\/\/ in meters\n\t\t\t\n            var getDistanceKM = (getDistance\/1000).toFixed(0)+' km';\n            var METERS_TO_MILES = 0.000621371192;\n            var getDistanceMiles = (Math.round( parseFloat(getDistance) * METERS_TO_MILES * 10 ) \/ 10)+' miles'; \/\/ in miles\n\n            var chkUnit = $('#unit').val();\n            var setDistance = (chkUnit == 'km') ? getDistanceKM : getDistanceMiles;\n            var setTime = secondsTimeSpanToHMS(getDuration);\n\n            html = '';\n            html += '<div class=\"col-md-12\" style=\"padding:6px;font-weight:bold;font-size:15px;text-align:center;margin:5px 0px;\">';\n            html +=     '<div><h3 class=\"center\"><span class=\"ez-toc-section\" id=\"Distances_setDistance_Time_setTime\"><\/span>Distances: '+setDistance+' &nbsp;&nbsp;&nbsp;&nbsp; Time: '+setTime+'<span class=\"ez-toc-section-end\"><\/span><\/h3><\/div>';\n            html += '<\/div>';\n\n            $('#distancetimeContainer').show().html(html);\n        } else {\n            window.alert('Directions request failed due to ' + status);\n        }\n    });\n}\nfunction resetAll(){\n    window.location.reload();\n}\nfunction secondsTimeSpanToHMS(s) {\nvar h = Math.floor(s\/3600); \/\/Get whole hours\ns -= h*3600;\nvar m = Math.floor(s\/60); \/\/Get remaining minutes\ns -= m*60;\n\/\/return h+\":\"+(m < 10 ? '0'+m : m)+\":\"+(s < 10 ? '0'+s : s); \/\/zero padding on minutes and seconds\nreturn h+\"h \"+(m < 10 ? '0'+m : m)+\"m\"; \/\/zero padding on minutes and seconds\n}\n<\/script> \t\t\n\t\t\n<\/footer><!-- #colophon -->\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":64075,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[2846,2841,2777],"class_list":["post-57552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-generalidades","tag-kit-de-viagem","tag-mapas","tag-viajar-de-carro","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-25","no-featured-image-padding"],"_links":{"self":[{"href":"https:\/\/www.joaoleitao.com\/viagens\/wp-json\/wp\/v2\/posts\/57552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joaoleitao.com\/viagens\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joaoleitao.com\/viagens\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joaoleitao.com\/viagens\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joaoleitao.com\/viagens\/wp-json\/wp\/v2\/comments?post=57552"}],"version-history":[{"count":0,"href":"https:\/\/www.joaoleitao.com\/viagens\/wp-json\/wp\/v2\/posts\/57552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joaoleitao.com\/viagens\/wp-json\/wp\/v2\/media\/64075"}],"wp:attachment":[{"href":"https:\/\/www.joaoleitao.com\/viagens\/wp-json\/wp\/v2\/media?parent=57552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joaoleitao.com\/viagens\/wp-json\/wp\/v2\/categories?post=57552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joaoleitao.com\/viagens\/wp-json\/wp\/v2\/tags?post=57552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}