{"id":7955,"date":"2026-02-06T18:14:16","date_gmt":"2026-02-06T21:14:16","guid":{"rendered":"https:\/\/sitesfloripa.com\/?page_id=7955"},"modified":"2026-02-06T18:54:00","modified_gmt":"2026-02-06T21:54:00","slug":"7955-2","status":"publish","type":"page","link":"https:\/\/sitesfloripa.com\/index.php\/7955-2\/","title":{"rendered":""},"content":{"rendered":"\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" \/>\n\n<style>\n    :root { --blue: #0047bb; --green: #28a745; --gray: #f8fafc; }\n    #app-mapeia { font-family: 'Segoe UI', sans-serif; max-width: 1100px; margin: 20px auto; display: flex; flex-wrap: wrap; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); overflow: hidden; border: 1px solid #e2e8f0; }\n    \n    \/* Painel Lateral *\/\n    .sidebar { flex: 1; min-width: 350px; padding: 25px; background: var(--gray); z-index: 10; }\n    .map-area { flex: 2; min-width: 450px; min-height: 500px; background: #e5e7eb; }\n\n    .input-group { position: relative; margin-bottom: 20px; }\n    .input-group i { position: absolute; left: 12px; top: 40px; color: var(--blue); }\n    label { font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; margin-bottom: 8px; display: block; }\n    input, select { width: 100%; padding: 12px 12px 12px 35px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; outline: none; transition: 0.2s; }\n    input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,71,187,0.1); }\n\n    \/* LISTA DE SUGEST\u00d5ES (O QUE VOC\u00ca PEDIU) *\/\n    .sugestoes-lista { \n        position: absolute; width: 100%; background: white; border-radius: 8px; \n        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); border: 1px solid #e2e8f0;\n        max-height: 250px; overflow-y: auto; z-index: 9999; display: none; margin-top: 5px;\n    }\n    .sugestao-item { \n        padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #f1f5f9; \n        display: flex; align-items: center; gap: 10px; font-size: 14px; color: #334155;\n    }\n    .sugestao-item:hover { background: #f8fafc; color: var(--blue); }\n    .sugestao-item i { position: static; color: #94a3b8; font-size: 12px; }\n\n    .btn-calcular { \n        background: var(--green); color: white; border: none; width: 100%; padding: 16px; \n        border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 16px; margin-top: 10px;\n    }\n    .results { margin-top: 25px; padding-top: 20px; border-top: 2px solid #e2e8f0; display: none; }\n    .res-line { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }\n    .total-box { background: #dcfce7; padding: 15px; border-radius: 8px; color: #166534; font-weight: bold; font-size: 18px; margin-top: 15px; text-align: center; }\n<\/style>\n\n<div id=\"app-mapeia\">\n    <div class=\"sidebar\">\n        <h2 style=\"color:var(--blue); margin-bottom:25px;\"><i class=\"fa-solid fa-route\"><\/i> <\/h2>\n        \n        <div class=\"input-group\">\n            <label>Origem (Cidade ou Endere\u00e7o)<\/label>\n            <i class=\"fa-solid fa-location-dot\"><\/i>\n            <input type=\"text\" id=\"origem\" placeholder=\"Ex: Santos, SP\" autocomplete=\"off\" oninput=\"buscarEndereco(this, 'lista-origem')\">\n            <div id=\"lista-origem\" class=\"sugestoes-lista\"><\/div>\n        <\/div>\n\n        <div class=\"input-group\">\n            <label>Destino (Cidade ou Endere\u00e7o)<\/label>\n            <i class=\"fa-solid fa-flag-checkered\"><\/i>\n            <input type=\"text\" id=\"destino\" placeholder=\"Ex: S\u00e3o Paulo, SP\" autocomplete=\"off\" oninput=\"buscarEndereco(this, 'lista-destino')\">\n            <div id=\"lista-destino\" class=\"sugestoes-lista\"><\/div>\n        <\/div>\n\n        <div style=\"display:flex; gap:10px;\">\n            <div class=\"input-group\" style=\"flex:1\">\n                <label>Consumo (KM\/L)<\/label>\n                <i class=\"fa-solid fa-gas-pump\"><\/i>\n                <input type=\"number\" id=\"km_l\" value=\"12\" style=\"padding-left: 35px;\">\n            <\/div>\n            <div class=\"input-group\" style=\"flex:1\">\n                <label>Pre\u00e7o Comb.<\/label>\n                <i class=\"fa-solid fa-dollar-sign\"><\/i>\n                <input type=\"number\" id=\"preco_comb\" value=\"5.85\" step=\"0.01\">\n            <\/div>\n        <\/div>\n\n        <button class=\"btn-calcular\" onclick=\"gerarRota()\">CALCULAR VIAGEM<\/button>\n\n        <div id=\"res_area\" class=\"results\">\n            <div class=\"res-line\"><span>Dist\u00e2ncia:<\/span> <strong id=\"val_dist\">&#8212;<\/strong><\/div>\n            <div class=\"res-line\"><span>Tempo estimado:<\/span> <strong id=\"val_tempo\">&#8212;<\/strong><\/div>\n            <div class=\"res-line\"><span>Combust\u00edvel:<\/span> <strong id=\"val_gas\">&#8212;<\/strong><\/div>\n            <div class=\"res-line\"><span>Ped\u00e1gios (Est.):<\/span> <strong id=\"val_ped\">&#8212;<\/strong><\/div>\n            <div class=\"total-box\" id=\"val_total\">R$ 0,00<\/div>\n        <\/div>\n    <\/div>\n    <div class=\"map-area\" id=\"map\"><\/div>\n<\/div>\n\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n<script>\n    var map = L.map('map').setView([-23.55, -46.63], 5);\n    L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);\n    var routeLayer;\n    var pontos = { start: null, end: null };\n\n    \/\/ FUN\u00c7\u00c3O QUE CRIA A LISTA DE SUGEST\u00d5ES AO DIGITAR\n    async function buscarEndereco(input, listaId) {\n        const query = input.value;\n        const lista = document.getElementById(listaId);\n        \n        if (query.length < 3) { lista.style.display = 'none'; return; }\n\n        try {\n            const response = await fetch(`https:\/\/nominatim.openstreetmap.org\/search?format=json&#038;q=${encodeURIComponent(query)}&#038;countrycodes=br&#038;limit=5`);\n            const data = await response.json();\n            \n            if (data.length > 0) {\n                lista.style.display = 'block';\n                lista.innerHTML = data.map(item => `\n                    <div class=\"sugestao-item\" onclick=\"selecionarPonto('${input.id}', '${listaId}', ${item.lat}, ${item.lon}, '${item.display_name}')\">\n                        <i class=\"fa-solid fa-location-dot\"><\/i>\n                        <span>${item.display_name}<\/span>\n                    <\/div>\n                `).join('');\n            } else {\n                lista.style.display = 'none';\n            }\n        } catch (e) { console.error(\"Erro na busca\"); }\n    }\n\n    function selecionarPonto(inputId, listaId, lat, lon, nome) {\n        document.getElementById(inputId).value = nome;\n        document.getElementById(listaId).style.display = 'none';\n        pontos[inputId === 'origem' ? 'start' : 'end'] = [lon, lat];\n    }\n\n    async function gerarRota() {\n        if (!pontos.start || !pontos.end) {\n            alert(\"Por favor, selecione um endere\u00e7o da lista de sugest\u00f5es.\");\n            return;\n        }\n\n        const url = `https:\/\/router.project-osrm.org\/route\/v1\/driving\/${pontos.start[0]},${pontos.start[1]};${pontos.end[0]},${pontos.end[1]}?overview=full&geometries=geojson`;\n        \n        try {\n            const res = await fetch(url);\n            const data = await res.json();\n            const route = data.routes[0];\n            const km = route.distance \/ 1000;\n            const minutos = route.duration \/ 60;\n\n            \/\/ C\u00e1lculos\n            const consumo = parseFloat(document.getElementById('km_l').value);\n            const preco = parseFloat(document.getElementById('preco_comb').value);\n            const custoGas = (km \/ consumo) * preco;\n            \n            \/\/ Simula\u00e7\u00e3o de Ped\u00e1gio (M\u00e9dia brasileira de 1 a cada 80km)\n            const pedagios = Math.floor(km \/ 80) * 12.50; \n            const total = custoGas + pedagios;\n\n            \/\/ Exibir Resultados\n            document.getElementById('res_area').style.display = 'block';\n            document.getElementById('val_dist').innerText = km.toFixed(1) + \" km\";\n            document.getElementById('val_tempo').innerText = minutos > 60 ? Math.floor(minutos\/60)+\"h \" + Math.round(minutos%60)+\"min\" : Math.round(minutos)+\"min\";\n            document.getElementById('val_gas').innerText = \"R$ \" + custoGas.toFixed(2);\n            document.getElementById('val_ped').innerText = \"R$ \" + pedagios.toFixed(2);\n            document.getElementById('val_total').innerText = \"TOTAL ESTIMADO: R$ \" + total.toFixed(2);\n\n            \/\/ Mapa\n            if (routeLayer) map.removeLayer(routeLayer);\n            routeLayer = L.geoJSON(route.geometry, {style: {color: '#0047bb', weight: 6}}).addTo(map);\n            map.fitBounds(routeLayer.getBounds(), {padding: [50, 50]});\n\n        } catch (err) { alert(\"Erro ao calcular rota.\"); }\n    }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Origem (Cidade ou Endere\u00e7o) Destino (Cidade ou Endere\u00e7o) Consumo (KM\/L) Pre\u00e7o Comb. CALCULAR VIAGEM Dist\u00e2ncia: &#8212; Tempo estimado: &#8212; Combust\u00edvel: &#8212; Ped\u00e1gios (Est.): &#8212; R$ 0,00<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/sitesfloripa.com\/index.php\/wp-json\/wp\/v2\/pages\/7955"}],"collection":[{"href":"https:\/\/sitesfloripa.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sitesfloripa.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sitesfloripa.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitesfloripa.com\/index.php\/wp-json\/wp\/v2\/comments?post=7955"}],"version-history":[{"count":5,"href":"https:\/\/sitesfloripa.com\/index.php\/wp-json\/wp\/v2\/pages\/7955\/revisions"}],"predecessor-version":[{"id":7961,"href":"https:\/\/sitesfloripa.com\/index.php\/wp-json\/wp\/v2\/pages\/7955\/revisions\/7961"}],"wp:attachment":[{"href":"https:\/\/sitesfloripa.com\/index.php\/wp-json\/wp\/v2\/media?parent=7955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}