如何从 map url 中找到 long 和 lat，然后通过将 long 和 lat 作为参数传递使其更具动态性

Question

I am new to vue.js and am stuck with embed google map url. I have google and searched a lot but not getting what I want. I have this url for example: "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"; and from this url I am trying to get the lat and long, so I can make them more dynamic and not just hardcode it. Any help will be much appreciated!

So far I tried this below, i want to pass long and lat as param or as 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}`;
        });
      }
    },
  },

and then using as props in Iframe:

<template>
  <iframe :src="src" class="map" />
</template>

Answer 1

If the URL format is always the same, maybe you can just use RegExp like this:

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