📅 最后修改于: 2023-12-03 15:12:12.601000 🧑 作者: Mango
谷歌地图是许多网站和应用程序的必备功能之一。在这个过程中，使用CSS和HTML来设置和自定义谷歌地图是很重要的一步。本文将介绍如何使用CSS和HTML来自定义谷歌地图。
要在网页中添加谷歌地图，您需要在HTML文档中使用嵌入式Google Maps API。以下是一个基本的HTML模板，可以帮助你开始。
<!DOCTYPE html>
<html>
<head>
<title>谷歌地图 CSS - HTML</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.7413549, lng: -73.9980244},
zoom: 14
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
#map是一个div元素，在其中您可以放置和自定义谷歌地图。上面的CSS代码设置了#map元素的高度为400像素，宽度为100%。在JavaScript代码中，在initMap()函数中，我们通过API密钥调用了谷歌地图API，并在#map元素中创建了一个新的谷歌地图实例。
一旦你在你的网页中添加了谷歌地图，你就可以使用CSS来自定义地图。以下是一些例子：
谷歌地图有几个内置的样式主题，但你可以使用CSS覆盖这些样式，以便使地图更符合您的品牌。以下是一个例子：
#map {
height: 400px;
width: 100%;
background-color: #eee;
}
上面的CSS代码将地图的背景颜色更改为灰色。
标记和标注是谷歌地图上最常用的元素之一。要自定义标记和标注，您可以使用CSS来更改颜色、图标和其他属性。以下是一些例子：
/* 更改标注图标 */
.gmnoprint img[src$="/marker.png"] {
width: 30px;
height: 40px;
background-color: transparent;
border: none;
}
/* 更改标记图标 */
.gmnoprint img[src$="/markers.png"] {
width: 30px;
height: 40px;
background-color: transparent;
border: none;
}
/* 更改标注颜色 */
.gmnoprint div[style="background-color: rgb(255, 255, 255); border: 1px solid rgb(170, 170, 170); z-index: 110; -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; overflow: hidden;"] {
background-color: #ff0000;
border-color: #000;
}
上面的CSS代码将标记和标注的图标尺寸更改为30 x 40像素，并更改了标注的背景颜色。
地图上的控件是允许用户与地图交互的按钮和复选框。要更改地图控件的样式，您可以使用CSS。以下是一些例子：
/* 更改缩放控件 */
.gmnoprint .gm-control-active img[src$="/zoom-plus.png"],
.gmnoprint .gm-control-active img[src$="/zoom-minus.png"] {
width: 20px;
height: 20px;
}
上面的CSS代码将缩放控件中的加号和减号的大小更改为20像素。
使用CSS和HTML自定义谷歌地图并不难，但需要花费一些时间来测试和调整。通过使用上面的代码，您可以开始自定义谷歌地图，使其符合您的品牌。