谷歌地图与标准样式自定义按钮 [英] Google maps custom button with standard style

问题描述

有没有办法使用他们最新的API添加自定义按钮，谷歌地图，因此，它会使用相同的样式与其他标准按钮？我很感谢样本code演示解决方案。

Is there any way to add custom button to the Google Maps using their latest api, so that it will use the same style as other standard buttons? I'd be thankful for a sample code demonstrating the solution.

推荐答案

还有，你可以申请或者其他没有默认类。你必须跟进发展和改变你的造型时，谷歌地图更改它。

There's no default class that you can apply or anything else. You'll have to follow up development and change your styling when Google Maps changes it.

有关的当前版本：

标记

<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 所做的正是这一点。一些风格的属性仍然可以通过地图直接应用。有什么理由不得到应用是光标：指针; 和一些风格可能需要重要作为后缀，以便它不会！通过地图覆盖。

Here's a jsFiddle that does exactly this. Some of the style attributes still get applied directly by maps. What's not getting applied is cursor: pointer; and some styles might need !important as suffix so it doesn't get overridden by maps.

与

google.maps.visualRefresh = true;

您可能需要刷新当这得到默认。

You might have to refresh when this gets the default.

这篇关于谷歌地图与标准样式自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！