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

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