ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: api directions google

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-02-24 19:42:30 -06:00
parent 7608931a33
commit 4301f6c7c8
5 changed files with 52 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

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

1
package.json
View File

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

33
src/composables/useDirectionRender.js
View File

@@ -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);

4
src/lib/axios.js
View File

@@ -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;

29
src/views/TrackingLoadView.vue
View File

@@ -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="{
path: polyline,
<Polyline
:options="{
path: polylines,
// geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
}" /> -->
strokeColor: '#2D90BB',
strokeOpacity: 0.7,
strokeWeight: 5,
clickable: true,
fillColor: '#75ad3e',
}"
/>
</GoogleMap>
</div>
<CardEmpty v-else text="No hay información disponible"/>