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"