mejoras en el mapa
This commit is contained in:
@ -40,65 +40,46 @@ export function useDirectionsRoute() {
|
||||
errorRuta.value = null;
|
||||
|
||||
try {
|
||||
// Importar librerías necesarias de la nueva API
|
||||
const { RoutesService } = await google.maps.importLibrary("routes") as any;
|
||||
const routeService = new RoutesService();
|
||||
const { DirectionsService } = await google.maps.importLibrary("routes") as any;
|
||||
const directionsService = new DirectionsService();
|
||||
|
||||
// Límite de la API de Google Maps Routes: Origen, Destino, y hasta 25 intermediates
|
||||
const maxPuntosPorChunk = 25;
|
||||
const overlaps = 1;
|
||||
const maxWaypoints = 23; // Google Directions limit is typically 25 including origin/dest
|
||||
|
||||
for (let i = 0; i < paradas.length - 1; i += (maxPuntosPorChunk - overlaps)) {
|
||||
const chunk = paradas.slice(i, i + maxPuntosPorChunk);
|
||||
for (let i = 0; i < paradas.length - 1; i += maxWaypoints) {
|
||||
const chunk = paradas.slice(i, i + maxWaypoints + 1);
|
||||
if (chunk.length < 2) break;
|
||||
|
||||
const origin = {
|
||||
location: {
|
||||
latLng: {
|
||||
latitude: chunk[0]!.latitud,
|
||||
longitude: chunk[0]!.longitud
|
||||
}
|
||||
}
|
||||
};
|
||||
const origin = { lat: chunk[0]!.latitud, lng: chunk[0]!.longitud };
|
||||
const destination = { lat: chunk[chunk.length - 1]!.latitud, lng: chunk[chunk.length - 1]!.longitud };
|
||||
|
||||
const destination = {
|
||||
location: {
|
||||
latLng: {
|
||||
latitude: chunk[chunk.length - 1]!.latitud,
|
||||
longitude: chunk[chunk.length - 1]!.longitud
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const intermediates = chunk.slice(1, -1).map(p => ({
|
||||
location: {
|
||||
latLng: {
|
||||
latitude: p.latitud,
|
||||
longitude: p.longitud
|
||||
}
|
||||
}
|
||||
const waypoints = chunk.slice(1, -1).map(p => ({
|
||||
location: new google.maps.LatLng(p.latitud, p.longitud),
|
||||
stopover: true
|
||||
}));
|
||||
|
||||
try {
|
||||
const response = await routeService.computeRoutes({
|
||||
origin,
|
||||
destination,
|
||||
intermediates,
|
||||
travelMode: 'DRIVE' as any, // 'DRIVE' es el nuevo estandar en computeRoutes
|
||||
routingPreference: 'TRAFFIC_UNAWARE' as any,
|
||||
polylineQuality: 'HIGH_QUALITY' as any,
|
||||
polylineEncoding: 'ENCODED_POLYLINE' as any,
|
||||
const result = await new Promise<google.maps.DirectionsResult>((resolve, reject) => {
|
||||
directionsService.route({
|
||||
origin,
|
||||
destination,
|
||||
waypoints,
|
||||
travelMode: google.maps.TravelMode.DRIVING
|
||||
}, (response: google.maps.DirectionsResult | null, status: google.maps.DirectionsStatus) => {
|
||||
if (status === google.maps.DirectionsStatus.OK && response) {
|
||||
resolve(response);
|
||||
} else {
|
||||
reject(new Error(`Directions API failed: ${status}`));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (response.routes && response.routes.length > 0) {
|
||||
const route = response.routes[0];
|
||||
if (route.polyline && route.polyline.encodedPolyline) {
|
||||
const path = google.maps.geometry.encoding.decodePath(route.polyline.encodedPolyline);
|
||||
|
||||
if (result.routes && result.routes.length > 0) {
|
||||
const route = result.routes[0];
|
||||
if (route?.overview_path) {
|
||||
const polyline = new google.maps.Polyline({
|
||||
path: path,
|
||||
path: route.overview_path,
|
||||
map: map,
|
||||
strokeColor: isPast ? '#9CA3AF' : '#FBBF24', // Gris para lo lejano, Amarillo para lo cercano
|
||||
strokeColor: isPast ? '#9CA3AF' : '#FBBF24',
|
||||
strokeWeight: isPast ? 4 : 6,
|
||||
strokeOpacity: isPast ? 0.6 : 1.0,
|
||||
icons: isPast ? [{
|
||||
@ -107,15 +88,16 @@ export function useDirectionsRoute() {
|
||||
repeat: '10px'
|
||||
}] : []
|
||||
});
|
||||
|
||||
registrarPolyline(polyline);
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.warn(`SIBU | Tramo ${i} falló con Routes API: `, err);
|
||||
console.warn(`SIBU | Tramo ${i} falló con Directions API: `, err);
|
||||
}
|
||||
|
||||
await delay(200);
|
||||
if (i + maxWaypoints < paradas.length - 1) {
|
||||
await delay(300);
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
errorRuta.value = `Error crítico al trazar la ruta: ${err.message || String(err)}`;
|
||||
|
||||
@ -424,9 +424,8 @@ export function useGoogleMaps() {
|
||||
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
try {
|
||||
// Cargar ruta
|
||||
const { RoutesService } = await google.maps.importLibrary("routes") as any;
|
||||
const routeService = new RoutesService();
|
||||
const { DirectionsService } = await google.maps.importLibrary("routes") as any;
|
||||
const directionsService = new DirectionsService();
|
||||
|
||||
const tamañoChunk = 25;
|
||||
|
||||
@ -434,49 +433,34 @@ export function useGoogleMaps() {
|
||||
const chunk = paradas.slice(i, i + tamañoChunk);
|
||||
if (chunk.length < 2) break;
|
||||
|
||||
const origin = {
|
||||
location: {
|
||||
latLng: {
|
||||
latitude: chunk[0]!.lat,
|
||||
longitude: chunk[0]!.lng
|
||||
}
|
||||
}
|
||||
};
|
||||
const destination = {
|
||||
location: {
|
||||
latLng: {
|
||||
latitude: chunk[chunk.length - 1]!.lat,
|
||||
longitude: chunk[chunk.length - 1]!.lng
|
||||
}
|
||||
}
|
||||
};
|
||||
const intermediates = chunk.slice(1, -1).map(p => ({
|
||||
location: {
|
||||
latLng: {
|
||||
latitude: p.lat,
|
||||
longitude: p.lng
|
||||
}
|
||||
}
|
||||
const origin = { lat: chunk[0]!.lat, lng: chunk[0]!.lng };
|
||||
const destination = { lat: chunk[chunk.length - 1]!.lat, lng: chunk[chunk.length - 1]!.lng };
|
||||
const waypoints = chunk.slice(1, -1).map(p => ({
|
||||
location: new google.maps.LatLng(p.lat, p.lng),
|
||||
stopover: true
|
||||
}));
|
||||
|
||||
try {
|
||||
const response = await routeService.computeRoutes({
|
||||
origin,
|
||||
destination,
|
||||
intermediates,
|
||||
travelMode: 'DRIVE',
|
||||
routingPreference: 'TRAFFIC_UNAWARE',
|
||||
polylineQuality: 'HIGH_QUALITY',
|
||||
polylineEncoding: 'ENCODED_POLYLINE',
|
||||
const result = await new Promise<google.maps.DirectionsResult>((resolve, reject) => {
|
||||
directionsService.route({
|
||||
origin,
|
||||
destination,
|
||||
waypoints,
|
||||
travelMode: google.maps.TravelMode.DRIVING
|
||||
}, (response: google.maps.DirectionsResult | null, status: google.maps.DirectionsStatus) => {
|
||||
if (status === google.maps.DirectionsStatus.OK && response) {
|
||||
resolve(response);
|
||||
} else {
|
||||
reject(new Error(`Directions API failed: ${status}`));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (response.routes && response.routes.length > 0) {
|
||||
const route = response.routes[0];
|
||||
if (route.polyline && route.polyline.encodedPolyline) {
|
||||
const path = google.maps.geometry.encoding.decodePath(route.polyline.encodedPolyline);
|
||||
|
||||
if (result.routes && result.routes.length > 0) {
|
||||
const route = result.routes[0];
|
||||
if (route?.overview_path) {
|
||||
const polyline = new google.maps.Polyline({
|
||||
path: path,
|
||||
path: route.overview_path,
|
||||
map: map.value,
|
||||
strokeColor: '#FBBF24',
|
||||
strokeWeight: 5,
|
||||
@ -487,11 +471,10 @@ export function useGoogleMaps() {
|
||||
polylinesCreadas.push(polyline);
|
||||
registrarPolyline(polyline);
|
||||
|
||||
// Registrar en global overlays
|
||||
if (!globalOverlays.has(map.value)) {
|
||||
globalOverlays.set(map.value, new Set());
|
||||
if (!globalOverlays.has(map.value!)) {
|
||||
globalOverlays.set(map.value!, new Set());
|
||||
}
|
||||
globalOverlays.get(map.value)!.add(polyline);
|
||||
globalOverlays.get(map.value!)!.add(polyline);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
@ -501,7 +484,7 @@ export function useGoogleMaps() {
|
||||
await delay(200);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error cargando Routes API:', e);
|
||||
console.error('Error cargando Directions API:', e);
|
||||
}
|
||||
|
||||
return polylinesCreadas;
|
||||
|
||||
@ -56,31 +56,33 @@ export function useParadaCercana() {
|
||||
let mejorRutaPuntos: google.maps.LatLng[] = [];
|
||||
|
||||
try {
|
||||
const { RoutesService } = await google.maps.importLibrary("routes") as any;
|
||||
const routeService = new RoutesService();
|
||||
const { DirectionsService } = await google.maps.importLibrary("routes") as any;
|
||||
const directionsService = new DirectionsService();
|
||||
|
||||
const routePromises = top5.map(async (stop) => {
|
||||
try {
|
||||
const response = await routeService.computeRoutes({
|
||||
origin: {
|
||||
location: { latLng: { latitude: ubicacionUsuario.lat, longitude: ubicacionUsuario.lng } }
|
||||
},
|
||||
destination: {
|
||||
location: { latLng: { latitude: stop.latitude, longitude: stop.longitude } }
|
||||
},
|
||||
travelMode: 'DRIVE',
|
||||
routingPreference: 'TRAFFIC_UNAWARE',
|
||||
polylineQuality: 'HIGH_QUALITY',
|
||||
polylineEncoding: 'ENCODED_POLYLINE',
|
||||
const response = await new Promise<google.maps.DirectionsResult>((resolve, reject) => {
|
||||
directionsService.route({
|
||||
origin: { lat: ubicacionUsuario.lat, lng: ubicacionUsuario.lng },
|
||||
destination: { lat: stop.latitude, lng: stop.longitude },
|
||||
travelMode: google.maps.TravelMode.WALKING
|
||||
}, (result: google.maps.DirectionsResult | null, status: google.maps.DirectionsStatus) => {
|
||||
if (status === google.maps.DirectionsStatus.OK && result) {
|
||||
resolve(result);
|
||||
} else {
|
||||
reject(new Error(`Directions failed: ${status}`));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (response.routes && response.routes.length > 0) {
|
||||
const route = response.routes[0];
|
||||
const leg = route?.legs[0];
|
||||
return {
|
||||
stop,
|
||||
distance: route.distanceMeters || Infinity,
|
||||
duration: parseInt(route.duration || "0"),
|
||||
points: route.polyline?.encodedPolyline ? google.maps.geometry.encoding.decodePath(route.polyline.encodedPolyline) : []
|
||||
distance: leg?.distance?.value || Infinity,
|
||||
duration: leg?.duration?.value || 0,
|
||||
points: route?.overview_path || []
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
@ -100,7 +102,7 @@ export function useParadaCercana() {
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error cargando Routes API en useParadaCercana', e);
|
||||
console.error('Error cargando Directions API en useParadaCercana', e);
|
||||
}
|
||||
|
||||
// 3. Fallback a la más cercana lineal si falla API
|
||||
|
||||
@ -122,12 +122,12 @@ async function saveShuttle() {
|
||||
<div class="form-group grid-row">
|
||||
<div class="input-box">
|
||||
<label>Nombre de la Empresa</label>
|
||||
<input v-model="shuttleForm.company_name" type="text" placeholder="Ej: Chiriqui Transfers">
|
||||
<input v-model="shuttleForm.company_name" type="text" placeholder="Ej: Chiriqui Transfers" />
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<label>Imagen del Transporte</label>
|
||||
<div class="file-upload-wrapper">
|
||||
<input type="file" @change="handleImageChange" accept="image/*" id="file-input">
|
||||
<input type="file" @change="handleImageChange" accept="image/*" id="file-input" />
|
||||
<label for="file-input" class="file-label">
|
||||
<span class="material-icons">cloud_upload</span>
|
||||
{{ selectedFileName || 'SELECCIONAR IMAGEN' }}
|
||||
@ -140,18 +140,18 @@ async function saveShuttle() {
|
||||
<div class="form-group grid-row">
|
||||
<div class="input-box">
|
||||
<label>Origen</label>
|
||||
<input v-model="shuttleForm.origin" type="text" placeholder="Boquete">
|
||||
<input v-model="shuttleForm.origin" type="text" placeholder="Boquete" />
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<label>Destino</label>
|
||||
<input v-model="shuttleForm.destination" type="text" placeholder="Santa Catalina">
|
||||
<input v-model="shuttleForm.destination" type="text" placeholder="Santa Catalina" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group grid-row">
|
||||
<div class="input-box">
|
||||
<label>Tipo de Vehículo</label>
|
||||
<input v-model="shuttleForm.vehicle_type" type="text" placeholder="Mini Van Compartida">
|
||||
<input v-model="shuttleForm.vehicle_type" type="text" placeholder="Mini Van Compartida" />
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<label>Categoría</label>
|
||||
@ -175,22 +175,22 @@ async function saveShuttle() {
|
||||
<div class="form-group grid-row">
|
||||
<div class="input-box">
|
||||
<label>Duración Estimada</label>
|
||||
<input v-model="shuttleForm.estimated_duration" type="text" placeholder="4.5 horas">
|
||||
<input v-model="shuttleForm.estimated_duration" type="text" placeholder="4.5 horas" />
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<label>Salidas</label>
|
||||
<input v-model="shuttleForm.departure_times" type="text" placeholder="Todos los días 8:00 AM">
|
||||
<input v-model="shuttleForm.departure_times" type="text" placeholder="Todos los días 8:00 AM" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group grid-row">
|
||||
<div class="input-box">
|
||||
<label>Precio por Persona ($)</label>
|
||||
<input v-model="shuttleForm.price_per_person" type="number">
|
||||
<input v-model="shuttleForm.price_per_person" type="number" />
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<label>Precio Viaje Privado ($)</label>
|
||||
<input v-model="shuttleForm.price_private_trip" type="number">
|
||||
<input v-model="shuttleForm.price_private_trip" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -199,12 +199,12 @@ async function saveShuttle() {
|
||||
<label>WhatsApp (Sin +)</label>
|
||||
<div class="whatsapp-input">
|
||||
<span class="prefix">+</span>
|
||||
<input v-model="shuttleForm.contact_whatsapp" type="text" placeholder="50760000000">
|
||||
<input v-model="shuttleForm.contact_whatsapp" type="text" placeholder="50760000000" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<label>Teléfono de Llamada</label>
|
||||
<input v-model="shuttleForm.phone_number" type="text" placeholder="50760000000">
|
||||
<input v-model="shuttleForm.phone_number" type="text" placeholder="50760000000" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -215,7 +215,7 @@ async function saveShuttle() {
|
||||
<span>¿Habla Inglés? (Bilingüe)</span>
|
||||
</div>
|
||||
<div class="nexus-switch">
|
||||
<input type="checkbox" v-model="shuttleForm.english_speaking">
|
||||
<input type="checkbox" v-model="shuttleForm.english_speaking" />
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
</label>
|
||||
@ -870,4 +870,3 @@ async function saveShuttle() {
|
||||
.preview-panel { order: -1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user