AguimarSP

Orçamento frete

Jun 9th, 2021
900
5 hours
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //Opções do mapa
  2. let myLatLng = { lat: -23.528936185148808, lng: -46.61346811551164 };
  3. let mapOptions = {
  4.     center: myLatLng, //centraliza nas cordenadas de Lat e Lng
  5.     zoom: 15, //Mostra o mapa com zoom de ruas 15
  6.     mapTypeId: google.maps.MapTypeId.ROADMAP, //tipo de mapa usado ROADMAP
  7.     mapTypeControl: false, //Desabilita opções de mapa
  8.     fullscreenControl: false, //Desabilita controle de visualização fullScreen
  9.     streetViewControl: false, //Desabilita controle de StreetView
  10.     zoomControl: false, //Desabilita controle de Zoom
  11.     scrollwheel: false, //Desabilita scroll do mouse
  12.  
  13. };
  14.  
  15. //criar mapa
  16. let map = new google.maps.Map(document.querySelector('#googleMap'), mapOptions);
  17.  
  18. //create a DirectionsService object to use the route method and get a result for our request
  19. let directionsService = new google.maps.DirectionsService();
  20.  
  21. //create a DirectionsRenderer object which we will use to display the route
  22. let directionsDisplay = new google.maps.DirectionsRenderer();
  23.  
  24. //bind the DirectionsRenderer to the map
  25. directionsDisplay.setMap(map);
  26.  
  27.  
  28. //define a função calcRoute
  29. function calcularRota() {
  30.     //create request
  31.     let request = {
  32.         origin: document.querySelector("#inicio").value,
  33.         destination: document.querySelector("#fim").value,
  34.         travelMode: google.maps.TravelMode.DRIVING, //Veículo
  35.         unitSystem: google.maps.UnitSystem.METRIC //km
  36.     }
  37.  
  38.     //pass the request to the route method
  39.     directionsService.route(request, function (result, status) {
  40.         if (status == google.maps.DirectionsStatus.OK) {
  41.  
  42.             //Mostrar distância e tempo
  43.             const saida = document.querySelector('#saida');
  44.             let distancia = result.routes[0].legs[0].distance.text; //NOVO pega quantidade km
  45.             distancia = distancia.replace('km','') //NOVO tira os caracteres km
  46.             distancia = distancia.replace(".", "") //NOVO tirar o ponto para calcular km miores de 1Mil KM
  47.             let novaDistancia = parseFloat(distancia)//NOVO converte string para number
  48.             novaDistancia = (novaDistancia * 2.2) + 9//NOVO calculo para mostrar valor a pagar
  49.             let valorPagar = novaDistancia.toLocaleString("pt-BR", {style: "currency", currency: "BRL"})//NOVO formatar para moeda brasileira REAL
  50.             saida.innerHTML = `<div id='saida-distancia'><strong>Distância</strong>:<br> ${result.routes[0].legs[0].distance.text}</div><div id='saida-tempo'><strong>Tempo estimado</strong>:<br> ${result.routes[0].legs[0].duration.text}</div><div id='saida-valor'><strong>Valor a pagar</strong>:<br> ${valorPagar}</div><br><hr noshade=”noshade” size="3"><p id='porCartao'>*Pagamentos por cartão terá um acrescimo de 3%.</p>`
  51.        
  52.             //display route
  53.             directionsDisplay.setDirections(result);
  54.         } else {
  55.             //delete route inicio map
  56.             directionsDisplay.setDirections({ routes: [] });
  57.            
  58.             //centrealizar mapa nas coordenadas
  59.             map.setCenter(myLatLng);
  60.  
  61.             //mensagem de erro
  62.             saida.innerHTML = "<div class='alert-danger'><i class='fas fa-exclamation-triangle'></i> Ops! algo deu errado, verifique se os endereços estão corretos.</div>";
  63.         }
  64.     });
  65.  
  66. }
  67.  
  68. //Criando marcador personalizado
  69. let marcadorBase = "content/favicon.ico";
  70. let Marker = new google.maps.Marker({
  71.     position: myLatLng,
  72.     map: map,
  73.     icon: marcadorBase
  74. })
  75.  
  76. //Inserindo Auto Complete por endereços no mapa
  77. let options = {
  78.     fields: ['address_components', 'geometry'],
  79.     types: ['address'],
  80.     componentRestrictions: { country: "br" },
  81. }
  82.  
  83. let input1 = document.querySelector("#inicio");
  84. let autocomplete1 = new google.maps.places.Autocomplete(input1, options);
  85.  
  86. let input2 = document.querySelector("#fim");
  87. let autocomplete2 = new google.maps.places.Autocomplete(input2, options);
  88.  
RAW Paste Data