如何在街景模式下使用 iframe 嵌入 Google Map？

Question

当我打开 Google Map 时，右下角附近有一个小齿轮图标，可以让我分享。 它包括找到一个可嵌入的<iframe> 。 但是，一旦我 go 进入街景，这个齿轮图标就会消失。

如何嵌入map的街景版？

Answer 1

看来问题是新的谷歌地图没有办法嵌入。

如果你点击 在右下角而不是全景/街景模式下，您可以恢复为经典地图

然后你会看到

从那里你可以选择嵌入框架。

Answer 2

当您处于Streeview模式时，单击打印按钮旁边的“ 链接按钮 ”。 您将拥有一个iframe和一个用于自定义和预览的链接。

Answer 3

它太简单了。只需点击以下链接https://developers.google.com/maps/documentation/javascript/examples/streetview-embed

将html + javascript代码复制到您的页面并修改div样式（默认情况下，它会全屏显示）id = map-canvas

现在转到所需的街景并复制纬度，经度在url然后在你的代码中替换初始化函数latling（纬度，经度）完成!!!! 很高兴发布我的第一个答案堆栈溢出已经回答了我很多次

Answer 4

自从谷歌在过去两年中发生变化后，我将发布一个答案，说明如何使用新地图嵌入街景视图。

• 使用您想要的最佳视图进入街景模式

• 单击屏幕左上角的“三个点”

  

• 点击“分享或嵌入图片”

• 点击“嵌入图片”标签，然后复制/粘贴iframe的代码

Answer 5

如果您正在寻找更通用的方式，例如根据常规谷歌 map 链接或坐标显示嵌入式街景。 这是我的解决方案：

从常规链接中提取坐标

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

您可以阅读官方文档以了解有关参数等的更多信息： https://developers.google.com/maps/documentation/embed/embedding-map#streetview_mode