如何使用 iframe 在 html 中嵌入谷歌地图 - Html

有时候我们需要在网页中嵌入谷歌地图来展示地点位置等内容。使用 iframe 是最简单的方式。

步骤

1. 打开谷歌地图
2. 打开你需要展示的地点，调整缩放和位置等参数
3. 点击左上角的菜单按钮 (≡)
4. 选择“分享或嵌入地图”
5. 选择“嵌入地图”选项卡
6. 定制你的地图尺寸等设置
7. 复制生成的代码

使用

将生成的代码复制到你的 HTML 文件中即可。

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.258396564874!2d85.13751761497932!3d25.608941983697075!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f89a5c5d1f9c33%3A0xc7fdedf63b9968c!2sPashupatinath+Temple!5e0!3m2!1sen!2sus!4v1550631887924"
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  allowfullscreen
></iframe>

解释

代码中的 <iframe> 标签用于在 HTML 中嵌入其他网页或内容。在这个例子中，我们将谷歌地图的 URL 嵌入了这个标签中，width 和 height 属性设置了地图的宽高，frameborder 属性设为 0 可以取消 iframe 边框，allowfullscreen 属性则允许用户全屏查看地图。

可以通过调整 src 属性中的 URL 来嵌入你需要的地图。在上面的例子中，我们生成了一个 URL，它包含了 Pashupatinath Temple 的经纬度等信息，以定位该地点。