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

add: getDirections in maps

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-02-27 20:50:41 -06:00
parent 4301f6c7c8
commit 1ab389605d
6 changed files with 83 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/FormLoadModal.vue
View File

@@ -24,12 +24,13 @@
const heightMap = ref(768);
const originCoords = ref(null);
const destinationCoords = ref(null);
const polylines = ref([]);
const startLocation = ref(null);
const endLocation = ref(null);
const isLoading = ref(false);
const loadingLocations = ref(false);
const submited = ref(false);
const { geocodeAddress } = useDirectionsRender();
const { geocodeAddress, getDirections } = useDirectionsRender();
const formRef = ref(null);
const filterQueryVehicles = ref([]);
const checkLocationLoad = ref(false);
@@ -46,6 +47,8 @@
stateDestination: null,
});
const mapKey = import.meta.env.VITE_MAP_KEY;
const clearLoad = () => {
loadStore.currentLoad = null;
@@ -124,6 +127,13 @@
destinationCoords.value = await geocodeAddress(endLocation.value);
}
})
watch([originCoords, destinationCoords], async() => {
if(originCoords.value && destinationCoords.value) {
console.log('Se llama api direcciones ')
polylines.value = await getDirections(originCoords.value, destinationCoords.value);
}
})
})
watch(locationLoadSelected, () => {
@@ -510,7 +520,7 @@
v-model="locationDownloadSelected"
>
<option disabled value="">-- Seleccionar locación --</option>
<option v-for="loc in companyStore.locations" :value="loc">{{ loc.branch_name }}</option>
<option v-for="loc in companyStore.locationsLoads" :value="loc">{{ loc.branch_name }}</option>
</select>
</div>
<Custominput
@@ -566,7 +576,7 @@
</div>
</form>
<GoogleMap
api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
:api-key="mapKey"
:center="{lat:19.432600, lng:-99.133209}"
:zoom="zoom"
:min-zoom="2"
@@ -583,13 +593,18 @@
>
<Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
<Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
<!-- <Polyline :options="{
path: polyline,
// geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
}" /> -->
<Polyline
v-if="polylines"
:options="{
path: polylines,
// geodesic: true,
strokeColor: '#2D90BB',
strokeOpacity: 0.7,
strokeWeight: 5,
clickable: true,
fillColor: '#75ad3e',
}"
/>
</GoogleMap>
</div>
<div class="modal-footer custom-footer">

28
src/components/LoadDetailModal.vue
View File

@@ -2,15 +2,17 @@
import { ref, onMounted } from 'vue';
import CardEmpty from './CardEmpty.vue';
import Spiner from './ui/Spiner.vue';
import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map';
import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map';
import useDirectionsRender from '../composables/useDirectionRender';
import Cardload from './CardLoad.vue';
import { useLoadsStore } from '../stores/loads';
const mapKey = import.meta.env.VITE_MAP_KEY;
const zoom = ref(6);
const heightMap = ref(768);
const originCoords = ref(null);
const polylines = ref([]);
const destinationCoords = ref(null);
const isLoading = ref(false);
const windowWidth = ref(window.innerWidth);
@@ -18,7 +20,7 @@
const vehicleLastLocation = ref(null);
const isLoadActive = ref(false);
const { geocodeAddress } = useDirectionsRender()
const { geocodeAddress, getDirections } = useDirectionsRender()
const props = defineProps({
proposal: {
@@ -50,6 +52,7 @@
load.value = resp.data[0];
originCoords.value = await geocodeAddress(load.value.origin_formatted_address);
destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address);
polylines.value = await getDirections(originCoords.value, destinationCoords.value);
if(load.value.vehicle) {
vehicleLastLocation.value = {
lat: parseFloat(load.value.vehicle.last_location_lat),
@@ -113,7 +116,7 @@
<div v-if="load">
<Cardload :load="load" :read-only="true"/>
<GoogleMap
api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
:api-key="mapKey"
:center="{lat:19.432600, lng:-99.133209}"
:zoom="zoom"
:min-zoom="2"
@@ -141,13 +144,18 @@
<i class="fa-solid fa-truck" :style="{fontSize: 25 + 'px', color: 'green'}"></i>
</div>
</CustomMarker>
<!-- <Polyline :options="{
path: polyline,
// geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
}" /> -->
<Polyline
v-if="polylines"
:options="{
path: polylines,
// geodesic: true,
strokeColor: '#2D90BB',
strokeOpacity: 0.7,
strokeWeight: 5,
clickable: true,
fillColor: '#75ad3e',
}"
/>
</GoogleMap>
</div>
<CardEmpty v-else text="No hay información disponible"/>

28
src/components/MakeProposalModal.vue
View File

@@ -3,7 +3,7 @@
import CardEmpty from './CardEmpty.vue';
import Spiner from './ui/Spiner.vue';
import BadgeError from './ui/BadgeError.vue';
import { GoogleMap, Marker } from 'vue3-google-map';
import { GoogleMap, Marker, Polyline } from 'vue3-google-map';
import useDirectionsRender from '../composables/useDirectionRender';
import { useAuthStore } from '../stores/auth';
import { useCompanyStore } from '../stores/company';
@@ -11,11 +11,13 @@
import { saveProposal } from '../services/vehicles'
import Swal from 'sweetalert2';
const mapKey = import.meta.env.VITE_MAP_KEY;
const zoom = ref(6);
const heightMap = ref(768);
const originCoords = ref(null);
const destinationCoords = ref(null);
const polylines = ref([]);
const isLoading = ref(false);
const loadingSubmit = ref(false);
const windowWidth = ref(window.innerWidth);
@@ -28,7 +30,7 @@
comments: '',
});
const { geocodeAddress } = useDirectionsRender()
const { geocodeAddress, getDirections } = useDirectionsRender()
const props = defineProps({
load: {
@@ -61,6 +63,7 @@
await vehiclesStore.fetchVehicles(filterQuery);
originCoords.value = await geocodeAddress(props.load.origin_formatted_address);
destinationCoords.value = await geocodeAddress(props.load.destination_formatted_address);
polylines.value = await getDirections(originCoords.value, destinationCoords.value);
isLoading.value = false;
console.log(props.proposal);
if(props.proposal) {
@@ -204,7 +207,7 @@
</form>
<GoogleMap
v-if="!proposal"
api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
:api-key="mapKey"
:center="{lat:19.432600, lng:-99.133209}"
:zoom="zoom"
:min-zoom="2"
@@ -221,13 +224,18 @@
>
<Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
<Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
<!-- <Polyline :options="{
path: polyline,
// geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
}" /> -->
<Polyline
v-if="polylines"
:options="{
path: polylines,
// geodesic: true,
strokeColor: '#2D90BB',
strokeOpacity: 0.7,
strokeWeight: 5,
clickable: true,
fillColor: '#75ad3e',
}"
/>
</GoogleMap>
</div>
<CardEmpty v-else text="No hay coincidencia"/>

3
src/components/MapDirections.vue
View File

@@ -10,6 +10,7 @@
const polyline = ref([]);
// const startLocation = ref({ lat: 37.7749, lng: -122.4194 }); // San Francisco
// const endLocation = ref({ lat: 34.0522, lng: -118.2437 }); // Los Angeles
const mapKey = import.meta.env.VITE_MAP_KEY;
onMounted(async() => {
window.addEventListener('resize', handleResize);
@@ -80,7 +81,7 @@
<template>
<GoogleMap
api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
:api-key="mapKey"
:center="{lat:19.432600, lng:-99.133209}"
:zoom="zoom"
:min-zoom="2"

21
src/composables/useDirectionRender.js
View File

@@ -3,18 +3,19 @@ import { decode } from 'polyline';
export default function useDirectionsRender() {
const mapKey = import.meta.env.VITE_MAP_KEY;
const originCoords = ref(null);
const destinationCoords = ref(null);
const polylines = ref([]);
// const polylines = ref([]);
const geocodeAddress = async (address) => {
// Utiliza la API de geocodificación de Google Maps para obtener las coordenadas
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(
address
)}&key=${apiKey}`
)}&key=${mapKey}`
);
const data = await response.json();
const location = data.results[0].geometry.location;
@@ -25,28 +26,32 @@ export default function useDirectionsRender() {
};
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 {
let url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&mode=driving&key=${apiKey}`;
let url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&mode=driving&key=${mapKey}`;
const response = await fetch(url);
const data = await response.json();
let polylines = [];
if (data.routes && data.routes.length > 0) {
const steps = data.routes[0].legs[0].steps;
steps.forEach(item => {
const points = decode(item.polyline.points);
points.forEach(poly => {
polylines.value.push({
polylines.push({
lat: poly[0],
lng: poly[1]
})
})
});
console.log(polylines)
return polylines;
} else {
return [];
}
} catch (error) {
console.log(error);
return [];
}
};
@@ -54,6 +59,6 @@ export default function useDirectionsRender() {
originCoords,
geocodeAddress,
getDirections,
polylines
// polylines
}
}

10
src/views/TrackingLoadView.vue
View File

@@ -8,9 +8,11 @@
import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map';
import CardEmpty from '../components/CardEmpty.vue';
const mapKey = import.meta.env.VITE_MAP_KEY;
const isLoading = ref(true);
const loadStore = useLoadsStore();
const { geocodeAddress, getDirections, polylines } = useDirectionsRender()
const { geocodeAddress, getDirections } = useDirectionsRender()
const route = useRoute();
const load = ref(null);
const zoom = ref(6);
@@ -18,6 +20,7 @@
const vehicleLastLocation = ref(null);
const originCoords = ref(null);
const destinationCoords = ref(null);
const polylines = ref([]);
const isLoadActive = ref(false);
const windowWidth = ref(window.innerWidth);
@@ -47,7 +50,7 @@
console.log(vehicleLastLocation);
}
await getDirections(originCoords.value, destinationCoords.value);
polylines.value = await getDirections(originCoords.value, destinationCoords.value);
console.log(load.value.load_status);
switch (load.value.load_status) {
@@ -89,7 +92,7 @@
<div v-if="load">
<CardLoad :load="load" :read-only="true"/>
<GoogleMap
api-key="AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A"
:api-key="mapKey"
:center="{lat:19.432600, lng:-99.133209}"
:zoom="zoom"
:min-zoom="2"
@@ -118,6 +121,7 @@
</div>
</CustomMarker>
<Polyline
v-if="polylines"
:options="{
path: polylines,
// geodesic: true,