From 4301f6c7c8d94092d9195f8aca2f63b244332dd5 Mon Sep 17 00:00:00 2001 From: Alexandro Uc Santos Date: Sat, 24 Feb 2024 19:42:30 -0600 Subject: [PATCH] add: api directions google --- package-lock.json | 10 ++++++++ package.json | 1 + src/composables/useDirectionRender.js | 33 +++++++++++++++------------ src/lib/axios.js | 4 ++-- src/views/TrackingLoadView.vue | 31 ++++++++++++++++--------- 5 files changed, 52 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index b6ad117..4561ad4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "chart.js": "^4.4.1", "html2pdf.js": "^0.10.1", "pinia": "^2.1.7", + "polyline": "^0.2.0", "qalendar": "^3.7.0", "sass": "^1.69.5", "sweetalert2": "^11.10.1", @@ -1137,6 +1138,15 @@ } } }, + "node_modules/polyline": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/polyline/-/polyline-0.2.0.tgz", + "integrity": "sha512-rCJSkIHWZ/HOUoEWgjZ1DrRjLpTeTjgaktyJV0yhm8PugM5sKoavNjUHtI/amjsTn/Tq+Q3IIAuBD/dUSsWwxQ==", + "deprecated": "This module is now under the @mapbox namespace: install @mapbox/polyline instead", + "engines": { + "node": "*" + } + }, "node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", diff --git a/package.json b/package.json index 1ea8561..5d6f463 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "chart.js": "^4.4.1", "html2pdf.js": "^0.10.1", "pinia": "^2.1.7", + "polyline": "^0.2.0", "qalendar": "^3.7.0", "sass": "^1.69.5", "sweetalert2": "^11.10.1", diff --git a/src/composables/useDirectionRender.js b/src/composables/useDirectionRender.js index dd39d5a..6203099 100644 --- a/src/composables/useDirectionRender.js +++ b/src/composables/useDirectionRender.js @@ -1,4 +1,5 @@ import { ref } from "vue"; +import { decode } from 'polyline'; export default function useDirectionsRender() { @@ -7,7 +8,8 @@ export default function useDirectionsRender() { const polylines = ref([]); const geocodeAddress = async (address) => { // Utiliza la API de geocodificación de Google Maps para obtener las coordenadas - const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs'; // Reemplaza con tu clave de API + const apiKey = 'AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A'; // Reemplaza con tu clave de API + // const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs'; // Reemplaza con tu clave de API try { const response = await fetch( `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent( @@ -22,23 +24,26 @@ export default function useDirectionsRender() { } }; - const getDirections = async () => { - const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs'; - const originLatLng = `${originCoords.value.lat},${originCoords.value.lng}`; - const destinationLatLng = `${destinationCoords.value.lat},${destinationCoords.value.lng}`; + const getDirections = async (originCoords, destinationCoords) => { + console.log('GET directions,', originCoords) + const apiKey = 'AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A'; + const originLatLng = `${originCoords.lat},${originCoords.lng}`; + const destinationLatLng = `${destinationCoords.lat},${destinationCoords.lng}`; try { - const response = await fetch( - `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&key=${apiKey}` - ); + let url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&mode=driving&key=${apiKey}`; + const response = await fetch(url); const data = await response.json(); - if (data.routes && data.routes.length > 0) { const steps = data.routes[0].legs[0].steps; - const routePolyline = steps.map((step) => ({ - lat: step.end_location.lat, - lng: step.end_location.lng, - })); - polylines.value = routePolyline; + steps.forEach(item => { + const points = decode(item.polyline.points); + points.forEach(poly => { + polylines.value.push({ + lat: poly[0], + lng: poly[1] + }) + }) + }); } } catch (error) { console.log(error); diff --git a/src/lib/axios.js b/src/lib/axios.js index 9f857c5..6eb493e 100644 --- a/src/lib/axios.js +++ b/src/lib/axios.js @@ -5,8 +5,8 @@ const accessToken = localStorage.getItem('access'); const api = axios.create({ baseURL: baseUrl, headers: { - 'Authorization': 'Bearer ' + accessToken - } + Authorization: 'Bearer ' + accessToken + }, }); export default api; \ No newline at end of file diff --git a/src/views/TrackingLoadView.vue b/src/views/TrackingLoadView.vue index 9fa1654..1cbc1c5 100644 --- a/src/views/TrackingLoadView.vue +++ b/src/views/TrackingLoadView.vue @@ -5,12 +5,12 @@ import Spiner from '../components/ui/Spiner.vue'; import CardLoad from '../components/CardLoad.vue'; import useDirectionsRender from '../composables/useDirectionRender'; - import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map'; + import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map'; import CardEmpty from '../components/CardEmpty.vue'; const isLoading = ref(true); const loadStore = useLoadsStore(); - const { geocodeAddress } = useDirectionsRender() + const { geocodeAddress, getDirections, polylines } = useDirectionsRender() const route = useRoute(); const load = ref(null); const zoom = ref(6); @@ -38,13 +38,18 @@ load.value = resp.data[0]; originCoords.value = await geocodeAddress(load.value.origin_formatted_address); destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address); + console.log(load.value.vehicle) if(load.value.vehicle) { vehicleLastLocation.value = { lat: parseFloat(load.value.vehicle.last_location_lat), lng: parseFloat(load.value.vehicle.last_location_lng) } + console.log(vehicleLastLocation); } + await getDirections(originCoords.value, destinationCoords.value); + + console.log(load.value.load_status); switch (load.value.load_status) { case 'Loading': isLoadActive.value = true; @@ -84,11 +89,11 @@
- +