建立网站时,通常需要包括一张地图,以使人们获得更好的方向感。Google Maps是当今最受欢迎的地图服务,它提供了多种可以使用的工具和服务。
在本教程中,我们将向您展示如何轻松地将地图添加到您的网站并使用gMaps.js库对其进行自定义。这是一个简单易用的库,可让您充分利用Google Maps的潜力,而无需使用大量代码。
项目概况
为了演示Google Maps的用法,我们使用HTML和Bootstrap 4创建了一个简单的设计。您可以查看下面的图像以获取最终结果。
布局
我们的设计包括一个Bootstrap行和两列。左列显示Google地图,右列显示标题,其中包含一些文本,超棒的字体图标和一个小的图片库。
< div class = “ map-example” >
< div class = “ row” >
< div class = “ col-lg-6” >
< div id = “ map” > </ div >
</ div >
< div class = “ col-lg-6” >
< div class = “标题” >
< h3 > Lorem Ipsum Dolor </ h3 >
< div 类=“ rating” >
< i class = “ fa fa-star图标” > </ i >
< i class = “ fa fa-star图标” > </ i >
< i class = “ fa fa-star图标” > </ i >
< i class = “ fa fa-star-图标” > </ i >
< i class = “ fa fa-star-o图标” > </ i >
</ div >
</ div>
< div class = “ info” >
< p > Lorem ipsum dolor坐着,安全奉献精英。Nullam ornare leo porta cursus porttitor。Proin quis tempor ectus。Cras sodales nisi ut felis tincidunt suscipit。空洞的前庭和后庭。</ p >
< p > Aenean convallis,前庭刑警,sem nibh rutrum sem,vel sodales nisl velit eu。塞德·亨德利特(Sed Hendrerit)效索可立定 Maecenas tempus augue lacus。</ p >
</ div >
< div class = “ gallery” >
H4 >图片</ H4 >
< DIV 类= “行” >
< DIV 类= “COL-MD-4” >
<一个 HREF = “资产/ IMG / image2.jpg” > < IMG 类= “IMG-流体图像“ src = ” assets / img / image2.jpg“ > </ a >
</ div >
< div class = ” col-md-4“ >
<a href = “ assets / img / image3.jpg”> < img class = “ img-流体图像” src = “资产/img/image3.jpg” > </ a >
</ div >
< div class = “ col-md-4” >
< a href = “资产/ img / image4.jpg” > < img 类= “ img-流体图像” src = “资产/img/image4.jpg” > </ a >
</ div >
</ div >
</ div >
</div >
</ div >
</ div >
地图配置
为了使用Google Maps,您需要导入gMaps.js库和Google Maps API。它需要一个API密钥,因此,如果您已经拥有一个API密钥,则可以使用它,否则,可以转到此链接以学习如何创建一个。准备好密钥后,只需替换脚本的“ YOUR_API_KEY”部分。
<脚本 src = “ http://maps.google.com/maps/api/js?key=YOUR_API_KEY” ></ script >
< script src = “ https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js” ></脚本>
现在我们需要生成地图。我们创建了一个新的地图对象,并设置了选择器(’#map’)以及要在地图上显示的点的经度和纬度作为参数。
接下来,我们需要在地图上添加一个标记。为此,请使用addMarker()
要在其中放置纬度和经度的方法。我们还可以使用setZoom()
以整数作为参数的方法设置显示地图的初始缩放比例。数字越小,地图越“放大”。
var map = new GMaps({
el:'#map',
lat: 40.730610,
lng:-73.935242
});
map.addMarker({
lat:40.700610,
lng:-73.997242,
标题:'New York'
});
map.setZoom(8);
款式
样式位于单独的CSS文件中。由于我们使用的是Bootstrap,因此大多数样式都由框架完成。我们添加了一些边距和填充调整,字体颜色和框阴影。
.navbar .navbar-light .navbar-expand-lg .bg-white .page-navbar {
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
.navbar-light .navbar-nav .active > .nav-link,.navbar-light .navbar-nav .nav-link .active,.navbar-light .navbar-nav .nav-link .show,.navbar-light .navbar-nav .show > .nav-link {
font-weight:bold;
}
.nav-item .item {
padding-right:2rem ;
}
.navbar-nav :last-child .item :last-child,.navbar-nav :last-child .item :last-child a {
padding-right:0 ;
}
.map-example .heading .icon {
color:#ffb526 ;
}
.map-example {
margin-top:50px ;
padding-bottom:100px ;
}
.map-example .heading {
margin-bottom:20px ;
border-bottom:1px实线#e4e4e4 ;
padding-bottom:30px ;
}
.map-example .info {
margin-bottom:20px ;
border-bottom:1px实线#e4e4e4 ;
padding-bottom:20px ;
颜色:#636363 ;
}
.map-example .gallery h4 {
margin-bottom:30px ;
}
.map-example .gallery .image {
margin-bottom:15px ;
box-shadow:0px 2px 10px rgba(0,0,0,0.15);
}
.map-example #map {
height:300px ;
底边距:20px ;
}
.page-footer {
padding-top:32px ;
border-top:1px实线#ddd ;
text-align:center;
padding-bottom:20px ;
}
.page-footer a {
margin:0px 10px ;
显示:inline-block;
颜色:#282b2d ;
字体大小:18px ;
}
.page -footer .links {
display:inline-block;
}
@ media(min - width:992px){.
map -example #map {
height:500px ;
}
}
Bootstrap Studio中的Google Maps
Bootstrap Studio应用程序提供了一种快速简便的方法来配置Google Maps,而无需编写任何代码。您可以在Bootstrap Studio教程部分中找到有关如何在您的项目中添加Google Maps的详细说明。