{"id":70766,"date":"2026-04-16T08:09:04","date_gmt":"2026-04-16T06:09:04","guid":{"rendered":"https:\/\/tickelia.com\/demo_2023\/?p=70766"},"modified":"2026-04-16T08:09:08","modified_gmt":"2026-04-16T06:09:08","slug":"mapa-kilometraje-pt","status":"publish","type":"post","link":"https:\/\/tickelia.com\/demo_2023\/pt\/blog\/noticias\/mapa-kilometraje-pt\/","title":{"rendered":"MAPA KILOMETRAJE PT"},"content":{"rendered":"<div id=\"roadcalc-app\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet-routing-machine@latest\/dist\/leaflet-routing-machine.css\" \/>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet-control-geocoder\/dist\/Control.Geocoder.css\" \/>\r\n\r\n    <style>\r\n        :root {\r\n            --emerald: rgb(0, 199, 177);\r\n            --dark-teal: #006366;\r\n            --gold: #fbc02d;\r\n            --border-color: #e2e8f0;\r\n            --text-main: #1e293b;\r\n            --text-muted: #64748b;\r\n        }\r\n\r\n        #roadcalc-app {\r\n            width: 100%;\r\n            max-width: 900px;\r\n            margin: 0 auto;\r\n            background: #ffffff;\r\n            border: 1px solid var(--border-color);\r\n            border-radius: 8px;\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        #roadcalc-app #map-container {\r\n            width: 100%;\r\n            height: 500px;\r\n            z-index: 1;\r\n        }\r\n\r\n        #roadcalc-app .panel-body {\r\n            padding: 24px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 20px;\r\n        }\r\n\r\n        #roadcalc-app .input-stack {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 16px;\r\n        }\r\n\r\n        #roadcalc-app .input-group { display: flex; flex-direction: column; gap: 6px; }\r\n        \r\n        #roadcalc-app label { \r\n            font-size: 0.7rem; \r\n            font-weight: 800; \r\n            color: var(--text-muted); \r\n            text-transform: uppercase;\r\n        }\r\n\r\n        #roadcalc-app .input-wrapper {\r\n            display: flex;\r\n            align-items: center;\r\n            border: 1px solid var(--border-color);\r\n            border-radius: 6px;\r\n            padding: 4px 12px;\r\n            background: #ffffff;\r\n            transition: border-color 0.2s;\r\n        }\r\n\r\n        #roadcalc-app .input-wrapper:focus-within {\r\n            border-color: var(--emerald);\r\n        }\r\n\r\n        #roadcalc-app input {\r\n            border: none;\r\n            padding: 10px 0;\r\n            width: 100%;\r\n            font-size: 1rem;\r\n            color: var(--text-main);\r\n            outline: none;\r\n            background: transparent;\r\n        }\r\n\r\n        #roadcalc-app .btn-gps-inline {\r\n            background: var(--emerald);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 4px;\r\n            padding: 8px 25px;\r\n            cursor: pointer;\r\n            font-weight: 700;\r\n            font-size: 0.85rem;\r\n            white-space: nowrap;\r\n            margin-right: 12px;\r\n        }\r\n\r\n        #roadcalc-app .settings-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 16px;\r\n        }\r\n\r\n        @media (max-width: 500px) {\r\n            #roadcalc-app .settings-grid { grid-template-columns: 1fr; }\r\n        }\r\n\r\n        #roadcalc-app .results-summary {\r\n            display: none;\r\n            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\r\n            gap: 12px;\r\n        }\r\n\r\n        #roadcalc-app .result-card {\r\n            padding: 20px;\r\n            border-radius: 8px;\r\n            border: 1px solid var(--border-color);\r\n            background: #ffffff;\r\n        }\r\n\r\n        #roadcalc-app .card-label { \r\n            font-size: 0.75rem; \r\n            font-weight: 600; \r\n            margin-bottom: 8px; \r\n            display: block; \r\n            color: var(--text-muted);\r\n        }\r\n\r\n        #roadcalc-app .card-value { \r\n            font-size: 1.6rem; \r\n            font-weight: 800; \r\n            display: block; \r\n            color: var(--dark-teal);\r\n        }\r\n\r\n        #roadcalc-app .card-value.gold { color: var(--gold); }\r\n\r\n        #roadcalc-app .desglose { border-top: 1px solid var(--border-color); padding-top: 15px; display: none; }\r\n        #roadcalc-app .desglose-title { color: var(--emerald); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; display: block; }\r\n        #roadcalc-app .line-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; }\r\n\r\n        #roadcalc-app .actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }\r\n        @media (max-width: 500px) { #roadcalc-app .actions-grid { grid-template-columns: 1fr; } }\r\n\r\n        #roadcalc-app .btn-footer {\r\n            padding: 12px; border-radius: 6px; font-weight: 700; cursor: pointer; border: 1px solid var(--emerald); font-size: 0.85rem;\r\n            display: flex; align-items: center; justify-content: center; gap: 6px;\r\n        }\r\n        #roadcalc-app .btn-copy { background: var(--emerald); color: white; border: none; }\r\n        #roadcalc-app .btn-share { background: white; color: var(--emerald); }\r\n        #roadcalc-app .btn-reset { border-color: #ef4444; color: #ef4444; background: white; }\r\n\r\n        .leaflet-routing-container { display: none !important; }\r\n    <\/style>\r\n\r\n    <div id=\"map-container\"><\/div>\r\n\r\n    <div class=\"panel-body\">\r\n        <div class=\"input-stack\">\r\n            <div class=\"input-group\">\r\n                <label>Ponto de Origem<\/label>\r\n                <div class=\"input-wrapper\">\r\n                    <button class=\"btn-gps-inline\" onclick=\"appUsarGPS()\">\ud83d\udccd Minha localiza\u00e7\u00e3o<\/button>\r\n                    <input type=\"text\" id=\"app-origen-val\" placeholder=\"Selecione no mapa ou use o bot\u00e3o\" readonly>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label>Ponto Final (Destino)<\/label>\r\n                <div class=\"input-wrapper\">\r\n                    <input type=\"text\" id=\"app-destino-val\" placeholder=\"Clique no mapa para o destino\" readonly>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"settings-grid\">\r\n            <div class=\"input-group\">\r\n                <label>Pre\u00e7o Combust\u00edvel (\u20ac\/L)<\/label>\r\n                <div class=\"input-wrapper\">\r\n                    <input type=\"number\" id=\"app-precio\" value=\"1.65\" step=\"0.01\" oninput=\"appRecalcular()\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label>Consumo (L\/100km)<\/label>\r\n                <div class=\"input-wrapper\">\r\n                    <input type=\"number\" id=\"app-consumo\" value=\"7.0\" step=\"0.1\" oninput=\"appRecalcular()\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div id=\"app-summary\" class=\"results-summary\">\r\n            <div class=\"result-card\">\r\n                <span class=\"card-label\">Total a pagar (Combust\u00edvel)<\/span>\r\n                <span class=\"card-value\"><span id=\"res-coste\">0<\/span> \u20ac<\/span>\r\n            <\/div>\r\n            <div class=\"result-card\">\r\n                <span class=\"card-label\">Dist\u00e2ncia do Trajeto<\/span>\r\n                <span class=\"card-value\"><span id=\"res-dist\">0<\/span> km<\/span>\r\n            <\/div>\r\n            <div class=\"result-card\">\r\n                <span class=\"card-label\">Litros necess\u00e1rios<\/span>\r\n                <span class=\"card-value gold\"><span id=\"res-litros\">0<\/span> L<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div id=\"app-desglose\" class=\"desglose\">\r\n            <span class=\"desglose-title\">Detalhamento<\/span>\r\n            <div class=\"line-item\">\r\n                <span>Tempo estimado de viagem<\/span>\r\n                <span id=\"res-tiempo\">0 min<\/span>\r\n            <\/div>\r\n            <div class=\"line-item\">\r\n                <span>Tipo de c\u00e1lculo<\/span>\r\n                <span style=\"color: var(--emerald)\">Rota real por estrada<\/span>\r\n            <\/div>\r\n            \r\n            <div class=\"actions-grid\">\r\n                <button class=\"btn-footer btn-copy\" onclick=\"appCopiar()\">\ud83d\udcbe Copiar Resumo<\/button>\r\n                <button class=\"btn-footer btn-share\" onclick=\"appCompartir()\">\ud83d\udd17 Compartilhar<\/button>\r\n                <button class=\"btn-footer btn-reset\" onclick=\"appReiniciar()\">\u2715 Reiniciar<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/leaflet-routing-machine@latest\/dist\/leaflet-routing-machine.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/leaflet-control-geocoder\/dist\/Control.Geocoder.js\"><\/script>\r\n\r\n    <script>\r\n    (function() {\r\n        const map = L.map('map-container').setView([40.4167, -3.7037], 6);\r\n        L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);\r\n\r\n        let routing = null;\r\n        let points = [];\r\n        let stats = { dist: 0, time: 0, liters: 0, cost: 0 };\r\n\r\n        window.appUsarGPS = function() {\r\n            map.locate({setView: true, maxZoom: 14});\r\n        };\r\n\r\n        map.on('locationfound', e => appSeleccionarPunto(e.latlng));\r\n        map.on('click', e => appSeleccionarPunto(e.latlng));\r\n\r\n        function appSeleccionarPunto(latlng) {\r\n            if (points.length >= 2) appReiniciar();\r\n            points.push(latlng);\r\n            \r\n            if (points.length === 1) {\r\n                document.getElementById('app-origen-val').value = latlng.lat.toFixed(4) + \", \" + latlng.lng.toFixed(4);\r\n                L.marker(latlng).addTo(map);\r\n            } else if (points.length === 2) {\r\n                document.getElementById('app-destino-val').value = latlng.lat.toFixed(4) + \", \" + latlng.lng.toFixed(4);\r\n                appTrazarRuta();\r\n            }\r\n        }\r\n\r\n        function appTrazarRuta() {\r\n            map.eachLayer(l => { if(l instanceof L.Marker) map.removeLayer(l); });\r\n            routing = L.Routing.control({\r\n                waypoints: points,\r\n                lineOptions: { styles: [{ color: 'rgb(0, 199, 177)', weight: 6 }] },\r\n                createMarker: (i, wp) => L.marker(wp.latLng, {\r\n                    draggable: true,\r\n                    icon: L.icon({\r\n                        iconUrl: i === 0 ? 'https:\/\/raw.githubusercontent.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-blue.png' : 'https:\/\/raw.githubusercontent.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-red.png',\r\n                        iconSize: [25, 41], iconAnchor: [12, 41]\r\n                    })\r\n                })\r\n            }).addTo(map);\r\n\r\n            routing.on('routesfound', e => {\r\n                const r = e.routes[0].summary;\r\n                stats.dist = r.totalDistance \/ 1000;\r\n                stats.time = Math.round(r.totalTime \/ 60);\r\n                appRecalcular();\r\n            });\r\n        }\r\n\r\n        window.appRecalcular = function() {\r\n            if (stats.dist === 0) return;\r\n            const precio = parseFloat(document.getElementById('app-precio').value) || 0;\r\n            const consumo = parseFloat(document.getElementById('app-consumo').value) || 0;\r\n            stats.liters = (stats.dist \/ 100) * consumo;\r\n            stats.cost = stats.liters * precio;\r\n\r\n            document.getElementById('res-dist').innerText = stats.dist.toFixed(1);\r\n            document.getElementById('res-coste').innerText = stats.cost.toLocaleString('pt-PT', {minimumFractionDigits: 0, maximumFractionDigits: 0});\r\n            document.getElementById('res-litros').innerText = stats.liters.toFixed(1);\r\n            document.getElementById('res-tiempo').innerText = stats.time;\r\n\r\n            document.getElementById('app-summary').style.display = 'grid';\r\n            document.getElementById('app-desglose').style.display = 'block';\r\n        };\r\n\r\n        window.appReiniciar = function() {\r\n            points = [];\r\n            stats = { dist: 0, time: 0, liters: 0, cost: 0 };\r\n            document.getElementById('app-origen-val').value = \"\";\r\n            document.getElementById('app-destino-val').value = \"\";\r\n            if (routing) map.removeControl(routing);\r\n            map.eachLayer(l => { if(l instanceof L.Marker) map.removeLayer(l); });\r\n            document.getElementById('app-summary').style.display = 'none';\r\n            document.getElementById('app-desglose').style.display = 'none';\r\n        };\r\n\r\n        window.appCopiar = function() {\r\n            const txt = `Rota: ${stats.dist.toFixed(1)}km | Custo: ${stats.cost.toFixed(0)}\u20ac`;\r\n            navigator.clipboard.writeText(txt);\r\n            alert(\"Resumo copiado\");\r\n        };\r\n\r\n        window.appCompartir = function() {\r\n            if (navigator.share) navigator.share({ title: 'RoadCalc', text: `Trajeto: ${stats.dist.toFixed(1)}km`, url: window.location.href });\r\n        };\r\n    })();\r\n    <\/script>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[4382],"tags":[],"class_list":["post-70766","post","type-post","status-publish","format-standard","hentry","category-noticias"],"acf":[],"lang":"pt","translations":{"pt":70766},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/comments?post=70766"}],"version-history":[{"count":1,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70766\/revisions"}],"predecessor-version":[{"id":70769,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70766\/revisions\/70769"}],"wp:attachment":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/media?parent=70766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/categories?post=70766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/tags?post=70766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}