谷歌地图自定义按钮与标准风格

Google maps custom button with standard style

本文关键字：标准 风格 按钮 自定义 谷歌地图      更新时间：2023-09-26

有没有办法使用谷歌地图的最新api将自定义按钮添加到谷歌地图中，使其使用与其他标准按钮相同的样式？如果有一个示例代码演示该解决方案，我将不胜感激。

没有可以应用的默认类或其他任何类。当谷歌地图改变你的风格时，你必须跟进开发并改变它。

对于当前版本：

MarkUp

<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;

当它成为默认值时，您可能需要刷新。

相关文章：