0
260
VistasCómo encontrar long y lat desde la URL del mapa y luego hacerlo más dinámico al pasar long y lat como param
Soy nuevo en vue js y estoy atascado con la URL del mapa de Google incrustado. Tengo google y busqué mucho pero no obtengo lo que quiero. Tengo esta URL, por ejemplo: "https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d20041.58914746939!2d17.008093249999998!3d51.10479505!2m3!1f0!2f0!3f0 !3m2!1i1024!2i768!4f13.1!5e0!3m2!1spl!2spl!4v1644570663221!5m2!1spl!2spl"; y desde esta url estoy tratando de obtener la latitud y la longitud, para poder hacerlos más dinámicos y no solo codificarlos. ¡Cualquier ayuda será muy apreciada!
Hasta ahora probé esto a continuación, quiero pasar long y lat como param o como variable (+ lat + long...):
computed: { src() { const url = "https://www.google.com/maps/embed?pb="; const params = new URLSearchParams({ center: `${20041.58914746939},${17.008093249999998}`, zoom: 15, size: "300x300", maptype: "terrain", }); return `${url}?${params}`; }, }, // also tried with this example ( nothing seems to work): computed: { src() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { console.log(position.coords.latitude, position.coords.longitude); const url = "https://www.google.com/maps/embed?pb="; const myLatlng = `${position.coords.latitude} , ${position.coords.longitude}`; const params = new URLSearchParams({ center: myLatlng, zoom: 15, size: "600x300", maptype: "terrain", }); console.log("params", params); console.log("mylatlong", myLatlng); return `${url}?${params}`; }); } }, },y luego usar como accesorios en Iframe:
<template> <iframe :src="src" class="map" /> </template> 
1 Respuestas
Responde la pregunta0
Si el formato de URL es siempre el mismo, tal vez pueda usar RegExp así:
const url = 'https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d20041.58914746939!2d17.008093249999998!3d51.10479505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spl!2spl!4v1644570663221!5m2!1spl!2spl'; const matchLat = url.match(/!2d.*!3d/g)[0].match(/d.*!/g)[0]; const matchLon = url.match(/!3d.*!2m/g)[0].match(/d.*!/g)[0]; const lat = matchLat.substr(1, matchLat.length - 2); const lon = matchLon.substr(1, matchLon.length - 2); console.log('Lat: ', lat); console.log('Lon: ', lon);