谷歌地图自定义标准样式按钮

Question

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

- Sebastian Nowak

---

你想让按钮看起来像什么？我会使用IE或Chrome中的开发者工具，通过点击和抓取CSS选择你想要的按钮，并应用于你的按钮。 - Bill Blankenship

@UserSmith：标准的样式如下：http://i.imgur.com/0dF6hCL.png。我不能硬编码样式，因为当他们更新API时它不会自动调整，而且这是一个混乱的解决方案。 - Sebastian Nowak

我同意这是一个快速而不太优雅的解决方案。如果你知道要模拟的按钮所关联的id或class，你可以通过jquery从该对象中获取css并将其应用于你的按钮，但你可能会收到一堆你不想要的css。我不确定有什么解决方案能让你跟上他们下一个api版本的步伐，因为我不知道新的api版本会包含什么。 - Bill Blankenship

Answer 1

没有默认的类可以应用或任何其他东西。当Google Maps发生更改时，您将不得不进行后续开发并更改样式。

对于当前版本：

标记

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

您可能需要刷新页面，以便恢复默认设置。

- kaiser