谷歌地图是谷歌开发的网络地图服务。它提供卫星图像、街道地图、360°街道全景(街景)、实时交通状况(谷歌交通),以及步行、汽车、自行车(beta版)或公共交通的路线规划。
要在网站上添加带有标记的谷歌地图,需要三个基本步骤:
第一步:创建一个Html页面。
<!DOCTYPE html> < html > < head > < style > #map { width: 100%; height: 400px; background-color: grey; } </ style > </ head > < body > < p >My Google Maps Demo</ p > < div id = "map" ></ div > </ body > </ html > |
输出: 给定的代码描述了设置div大小和颜色的CSS。style元素为地图设置div大小。div的高度设置为400像素,宽度设置为100%,以显示整个网页宽度的地图。
代码为谷歌地图定义了页面的一个区域。div在输出中显示为灰色块,因为尚未添加贴图。
步骤2:添加带有标记的地图:
<!DOCTYPE html> < html > < head > < style > #map { height: 400px; width: 100%; } </ style > </ head > < body > < p >My Google Maps Demo</ p > < div id = "map" ></ div > < script > function initMap() { var test= {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: test }); var marker = new google.maps.Marker({ position: test, map: map }); } </ script > < script async defer src = </ script > </ body > </ html > |
说明:
- 在代码中,脚本从指定的URL加载API。
- 回调参数在加载API后执行initMap函数。
- async属性允许浏览器在加载API时继续呈现页面的其余部分。
- key参数包含API密钥。
- 在“key=”内键入api密钥。
该代码包含initMap函数,该函数在加载网页时初始化并添加映射。脚本标签可以用来添加你自己的javascript。
- 这段代码构造了一个新的Google maps对象,并向地图添加属性,包括中心和缩放级别。
- 在下面的代码中,是new google。地图。Map()创建一个新的Google maps对象。
- center属性告诉API地图的居中位置。地图坐标按以下顺序设置:纬度、经度。
- zoom属性指定地图的缩放级别。缩放:0是最低的缩放,显示整个地球。将“缩放”值设置得更高,以更高的分辨率放大地球。
下面的代码在地图上标出了一个标记。position属性设置标记的位置。
第3步:获取API密钥 以下是获取API密钥所需的步骤:
- 转到下面提到的链接 https://console.developers.google.com/flows/enableapi?apiid=maps_backend,地理编码\后端,方向\后端,距离\矩阵\后端,高程\后端,位置\后端&reusekey=true .
- 创建新项目或从现有项目中选择。
- 单击“继续”以启用API。
- 在凭证页面上,获取API密钥(并设置API密钥限制)。
- 用自己的API密钥替换URL中密钥参数的值
输出:
示例:在谷歌地图上添加Geeksforgeks office city
输入:
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
#map {
height: 400px;
width: 100%;
}
</
style
>
</
head
>
<
body
>
<
h3
>GFG Google Maps Demo</
h3
>
<
div
id
=
"map"
></
div
>
<
script
>
function initMap() {
var uluru = {lat: 28.501859, lng: 77.410320};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</
script
>
<
script
async defer
src=
AIzaSyB2bXKNDezDf6YNVc
-SauobynNHPo4RJb8&
callback
=
initMap
">
</
script
>
</
body
>
</
html
>
输出:
本文由 Shubrodeep Banerjee .如果你喜欢GeekSforgek,并想贡献自己的力量,你也可以使用 贡献极客。组织 或者把你的文章寄到contribute@geeksforgeeks.org.看到你的文章出现在Geeksforgeks主页上,并帮助其他极客。
如果您发现任何不正确的地方,或者您想分享有关上述主题的更多信息,请写下评论。