如何从谷歌地图 v3 自定义绘图控件外观？答案

【问题标题】：How to customize Drawing control looks from google maps v3?如何从谷歌地图 v3 自定义绘图控件外观？
【发布时间】：2015-12-11 10:36:56
【问题描述】：

我正在使用此代码让用户绘制圆圈或图像

drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: null,
                drawingControlOptions: {
                    drawingModes: [google.maps.drawing.OverlayType.CIRCLE,          google.maps.drawing.OverlayType.RECTANGLE]
                },
                rectangleOptions: shapeOptions,
                circleOptions: shapeOptions,
                Options: shapeOptions,
                map: map
            });

问题是我需要为这些按钮设置样式，

我该怎么做？我看了here，但没有提及

我找到了this，但这为添加新按钮提供了参考，我想为当前按钮设置样式

【问题讨论】：

虽然可能有一些方法，但这些方法会比实现自己的（自定义）控件更复杂，并且可能不稳定（因为用于内置控件的标记不能保证稳定）
您可以通过更改 CSS 来实现。请参考 SO 帖子答案stackoverflow.com/questions/12474604/…

标签： javascript css google-maps-api-3 drawing

【解决方案1】：

       **You can add css styles for that particular button as below.** 
<style>
            div[title="Stop drawing"] {
                    content: url(https://cdn4.iconfinder.com/data/icons/whsr-january-flaticon-set/128/compass.png) !important;       
                    height: 28px;
                    width: 28px;
                    cursor: pointer;
                }

                div[title="Draw a circle"] {
                    content: url(http://www.pngmart.com/files/4/Moon-PNG-Transparent.png) !important;
                    height: 28px;
                    width: 28px;
                    cursor: pointer;
                }

                  div[title="Draw a rectangle"] {
                    content: url(https://www.shareicon.net/data/32x32/2015/07/04/64183_rectangle_256x256.png) !important;
                    height: 28px;
                    width: 28px;
                    cursor: pointer;
                }
</style>

【讨论】：

谢谢，我忘了这个问题。我最终创建了自定义按钮。但我认为这不是一个非常可靠的解决方案，因为您需要为每种语言添加规则。将来文本可能会改变：O但是谢谢:)

【解决方案2】：

我知道这是一个老问题，但另一种方法可能是使用基于 div 包装器的选择器 nth-child()，它有一个类 'gmnoprint'。

div 的标题属性不可靠，因为它会因语言而异。

例子：

div.gmnoprint div:nth-child(1)  {     
  height: 48px;
  width: 48px;
  cursor: pointer;
}

div.gmnoprint div:nth-child(2) {
  height: 48px;
  width: 48px;
  cursor: pointer;
}

div.gmnoprint div:nth-child(3) {
  height: 48px;
  width: 48px;
  cursor: pointer;
}

【讨论】：

【解决方案3】：

在最新的google maps api中需要使用button而不是div。

button[title="Stop drawing"] { 
  display: none !important; 
}

【讨论】：

请注意，这并不能回答问题，它还假设用户将使用英语