jquery 从常规链接获取GoogleMap嵌入URL

roejwanj  于 2023-01-30  发布在  jQuery
关注(0)|答案(2)|浏览(130)

我最近看到一个网站

,你可以把常规的谷歌Mapurl拖到他们的页面上,它会通过iframe自动嵌入它。我读了谷歌Map嵌入API,看起来没有办法做到这一点。我不确定这是否可以通过使用regex提取参数来实现。

// Sample https://www.google.com/maps/@37.3321023,-121.9035969,14z

$(button).click(function() {
   reg-url = $('#inputbox').val();
   convert();
});

function convert() {
    embedid = //get param from reg-url
    $('.wrapper').html("<iframe src='https://www.google.com/maps/embed?pb="+embedid+"'>");
}

所以基本上我想创建一个jquery函数,它会将常规的map url转换为嵌入url。

fjaof16o

fjaof16o1#

function GoogleMapsURLToEmbedURL(GoogleMapsURL)
{
    var coords = /\@([0-9\.\,\-a-zA-Z]*)/.exec(GoogleMapsURL);
    if(coords!=null)
    {
        var coordsArray = coords[1].split(',');
        return "https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d20000!2d"+coordsArray[1]+"!3d"+coordsArray[0]+"!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1486486434098";
    }
}

在您的样本中:-

https://www.google.com/maps/@37.3321023,-121.9035969,14z

在“@”之后,37.3321023是一个坐标,-121.9035969是第二个坐标,14 z是缩放。
我已经为你做了坐标,你所需要做的就是写一些如果的工作,把嵌入的缩放变成一个整数(我已经设置为总是20000,这看起来是根据网络界面的第14个缩放级别左右。

ie3xauqp

ie3xauqp2#

下面是我的解决方案:
从规则连接中提取坐标

export const getCoordinatesFromGoogleMapURL = (url: string) => {
  if (!url) {
    return undefined
  }
  const urlParts = url.split('/@')[1]?.split(',')

  if (!(urlParts && urlParts?.length > 1)) {
    return undefined
  }

  const gpsX = parseFloat(urlParts[0])
  const gpsY = parseFloat(urlParts[1])

  if (isNaN(gpsX) || isNaN(gpsY)) {
    return undefined
  }

  return [gpsX, gpsY] as [number, number]
}

从坐标生成嵌入URL:

export const generateGoogleMapEmbedUrl = (coordinates: [number, number]) => {
  if (!coordinates) {
    return undefined
  }

  const baseUrl = "https://www.google.com/maps/embed/v1/streetview"
  const coordinatesString = `${String(coordinates[0])},${String(coordinates[1])}`
  const url = `${baseUrl}?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&location=${coordinatesString}`

  return url
}

最后我们可以把它放在一起:

export function convertToEmbedURL(url: string): string {
  const coordinates = getCoordinatesFromGoogleMapURL(url)
  const embedUrl = generateGoogleMapEmbedUrl(coordinates)

  return embedUrl;
}

您可以阅读官方文档以了解更多关于params等的信息:www.example.comhttps://developers.google.com/maps/documentation/embed/embedding-map#streetview_mode

相关问题