如何自定義繪圖控制從谷歌地圖v3的外觀？

我使用此代碼，讓用戶繪製圓或圖像如何自定義繪圖控制從谷歌地圖v3的外觀？

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但是這使得添加新的按鈕參考，我想型電流那些

來源

2015-09-15 Toni Michel Caubet

雖然有很多方法可以，這些方式會比執行更復雜擁有（自定義）控件並且可能不穩定（因爲用於內置控件的標記不能保證穩定） –

您可以通過更改CSS來實現。請參閱SO帖子回答http://stackoverflow.com/questions/12474604/is-it-possible-to-change-the-google-maps-drawing-manager-icons – AniV

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

來源

2017-08-30 10:31:19

謝謝，我忘了這個問題。我最終創建了自定義按鈕。但我不認爲這是一個非常可靠的解決方案，因爲您需要爲每種語言添加規則。這些文本可能會在未來發生變化：O但是，謝謝:) –

如何自定義繪圖控制從谷歌地圖v3的外觀？

回答

相關問題