在HTML页面内添加Google地图的方法有两种:
- 使用API??密钥
- 不使用API??密钥
要将Google Map插入HTML页面内, 请按照以下步骤操作:
【如何在不使用API??密钥的情况下在html页面内添加Google Map()】转到谷歌地图并搜索你想要的位置。
![如何在不使用API??密钥的情况下在html页面内添加Google Map()](http://img.readke.com/220415/055340B01-0.png)
文章图片
现在, 将出现一个对话框, 以嵌入地图选项。
![如何在不使用API??密钥的情况下在html页面内添加Google Map()](http://img.readke.com/220415/0553403628-1.png)
文章图片
在对话框中将看到一个新选项, 用于复制html。你还可以选择要嵌入页面的地图大小。
![如何在不使用API??密钥的情况下在html页面内添加Google Map()](http://img.readke.com/220415/0553402O9-2.png)
文章图片
现在将其粘贴到你的html页面中。
例子:如何在不使用API密钥的情况下在HTML页面内添加Google Map。
<
!DOCTYPE html>
<
html>
<
head>
<
meta charset = "utf-8">
<
title>
Customize the scroll-bar<
/title>
<
style media = "screen">
body {
background-image: linear-gradient(
to right, dodgerblue, darkblue);
}
<
/style>
<
/head>
<
body>
<
center>
<
h1 style = "color:lawngreen;
">
Geeks For Geeks
<
/h1>
<
div>
<
!-- Google Map Copied Code -->
<
iframe src =
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3506.2233913121413!2d77.4051603706222!3d28.50292593193056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce626851f7009%3A0x621185133cfd1ad1!2slsbin!5e0!3m2!1sen!2sin!4v1585040658255!5m2!1sen!2sin"
width = "400"
height = "300"
frameborder = "0"
style = "border:0;
"
allowfullscreen = ""
aria-hidden = "false"
tabindex = "0">
<
/iframe>
<
/div>
<
/center>
<
/body>
<
/html>
输出如下:
![如何在不使用API??密钥的情况下在html页面内添加Google Map()](http://img.readke.com/220415/0553404453-3.png)
文章图片
注意:该技术的问题在于它不使用API, 因此地图不会自动更新, 因此每次你都必须通过更改地图的HTML代码来手动更新地图时。
推荐阅读
- 如何使用Node.js和MongoDB实现登录表单()
- 软件工程|用户界面设计指南
- CSS如何使用图像精灵(用法详细示例)
- Python如何使用OpenCV播放视频(代码实现)
- 算法题(在只有3和4的数字系统中查找第n个数字)
- 如何为ng-repeat指令中的多项选择添加动态选项()
- 亚马逊面试体验| 2020年SDE-1 FTE校园
- Python使用youtube_dl模块下载视频
- PHP Ds\Dequealloc()函数用法示例