模仿Google Maps mapTypeControl自定义控件

Question

有谁知道如何完全匹配Google Maps mapTypeControl按钮样式（关于ui / css）？我找到了一个不错的教程，但是按钮与默认的Google样式不匹配。是否有一种简单的方法来获取当前的Google Maps按钮样式，还是我必须手动尝试匹配current样式（在每个新版本中都可能有所不同，这会给您带来一定的痛苦...您知道我的意思吗？ ）。

Answer 1

快速浏览Chrome开发者控制台会发现以下内联样式（没有为任何按钮分配类或ID）。还要注意，此元素有一个空的no-styler浮动包装，该包装也包含按钮菜单（terrain按钮）。

对于“地图”按钮：

direction: ltr; 
overflow: hidden; 
text-align: center; 
position: relative; 
color: rgb(0, 0, 0); 
font-family: Arial, sans-serif; 
-webkit-user-select: none; 
font-size: 13px; 
background-color: rgb(255, 255, 255); 
padding: 1px 6px; 
border: 1px solid rgb(113, 123, 135); 
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; 
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; 
font-weight: bold; min-width: 29px; 
background-position: initial initial; 
background-repeat: initial initial; 

对于“卫星”按钮，唯一不同的样式是字体粗细