有没有办法使用最新的api为Google地图添加自定义按钮,以便它使用与其他标准按钮相同的样式?我要感谢一个展示解决方案的示例代码。
答案 0 :(得分:4)
您无法应用默认课程或其他任何课程。当Google地图更改时,您必须跟进开发并更改样式。
对于当前版本:
标记
<div class="gmnoprint custom-control-container">
<div class="gm-style-mtc">
<div class="custom-control" title="Click to set the map to Home">Home</div>
</div>
</div>
CSS
.custom-control-container {
margin: 5px;
}
.custom-control {
cursor: pointer;
direction: ltr;
overflow: hidden;
text-align: center;
position: relative;
color: rgb(0, 0, 0);
font-family: "Roboto", Arial, sans-serif;
-webkit-user-select: none;
font-size: 11px !important;
background-color: rgb(255, 255, 255);
padding: 1px 6px;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.14902);
-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;
min-width: 28px;
font-weight: 500;
}
.custom-control:hover {
font-weight: 900 !important;
}
这是一个jsFiddle就是这样做的。一些样式属性仍然可以直接由地图应用。未应用的内容是cursor: pointer;
,某些样式可能需要!important
作为后缀,因此不会被地图覆盖。
请注意,您已经可以使用
添加视觉刷新(新地图样式的预览)google.maps.visualRefresh = true;
当获得默认值时,您可能需要刷新。