add: api directions google

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",

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",

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 getDirections = async (originCoords, destinationCoords) => {
-      const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs';
+      console.log('GET directions,', originCoords)
-      const originLatLng = `${originCoords.value.lat},${originCoords.value.lng}`;
+      const apiKey = 'AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A';
-      const destinationLatLng = `${destinationCoords.value.lat},${destinationCoords.value.lng}`;
+      const originLatLng = `${originCoords.lat},${originCoords.lng}`;
+      const destinationLatLng = `${destinationCoords.lat},${destinationCoords.lng}`;
       try {
-          const response = await fetch(
+          let url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&mode=driving&key=${apiKey}`;
-            `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&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) => ({
+            steps.forEach(item => {
-              lat: step.end_location.lat,
+              const points = decode(item.polyline.points);
-              lng: step.end_location.lng,
+              points.forEach(poly => {
-            }));
+                polylines.value.push({
-            polylines.value = routePolyline;
+                  lat: poly[0],
+                  lng: poly[1]
+                })
+              })
+            });
           }
       } catch (error) {
         console.log(error);

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;

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 @@
         <div v-if="load">
             <CardLoad :load="load" :read-only="true"/>
             <GoogleMap
-                    api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
+                    api-key="AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A"
                     :center="{lat:19.432600, lng:-99.133209}"
                     :zoom="zoom" 
                     :min-zoom="2"
-                    :max-zoom="12"
+                    :max-zoom="20"
                     :style="{width: 100 + '%', height: heightMap + 'px'}"
                     :options="{
                         zoomControl: true,
@@ -112,13 +117,17 @@
                             <i class="fa-solid fa-truck" :style="{fontSize: 25 + 'px', color: 'green'}"></i>
                         </div>
                     </CustomMarker>
-                    <!-- <Polyline :options="{
+                    <Polyline 
-                        path: polyline,
+                        :options="{
-                        // geodesic: true,
+                            path: polylines,
-                        strokeColor: '#FF0000',
+                            // geodesic: true,
-                        strokeOpacity: 1.0,
+                            strokeColor: '#2D90BB',
-                        strokeWeight: 2
+                            strokeOpacity: 0.7,
-                    }" /> -->
+                            strokeWeight: 5,
+                            clickable: true,
+                            fillColor: '#75ad3e',
+                        }" 
+                    />
                 </GoogleMap>
         </div>
         <CardEmpty v-else text="No hay información disponible"/>