是否可以更改Google Maps繪圖管理器圖標？

Question

我正在尋找實施Google Maps多邊形選擇工具以在多個設備上使用。

桌面計算機上的默認繪圖管理器圖標（手形，多邊形繪圖工具）很好，但它們非常適合在Android設備上使用。誰能告訴我，如果有可能重寫默認圖標集（http://maps.gstatic.com/mapfiles/drawing.png）

我想我可以重寫專門的CSS和HTML，但很想知道是否沿着這條道路走下去有更好的辦法。

在此先感謝。

Answer 1

這是我用來修改按鈕，它應該給你一個起點，一旦你的ID寄託都，改變CSS是容易..

$(".gmnoprint").each(function(){ 
    var newObj = $(this).find("[title='Draw a circle']"); 
    newObj.parent().addClass("remove"); 

    // ID the toolbar 
    newObj.parent().parent().attr("id", "btnBar"); 

    // Now remove the Circle button 
    $(".remove").remove(); 

    // ID the Hand button 
    newObj = $(this).find("[title='Stop drawing']"); 
    newObj.attr('id', 'btnStop'); 

    // ID the Marker button 
    newObj = $(this).find("[title='Add a marker']"); 
    newObj.attr('id', 'btnMarker'); 

    // ID the line button 
    newObj = $(this).find("[title='Draw a line']"); 
    newObj.attr('id', 'btnLine'); 

    // ID the Rectangle Button 
    newObj = $(this).find("[title='Draw a rectangle']"); 
    newObj.attr('id', 'btnRectangle'); 

    // ID the Polygon button 
    newObj = $(this).find("[title='Draw a shape']"); 
    newObj.attr('id', 'btnShape'); 

}); 

要進一步修改，添加自己的按鈕工具欄是這樣的：

$("#btnBar").append('<div style="float: left; line-height: 0;"><div id="btnDelete" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(51, 51, 51); font-family: Arial,sans-serif; -moz-user-select: none; font-size: 13px; background: none repeat scroll 0% 0% rgb(255, 255, 255); padding: 4px; border-width: 1px 1px 1px 0px; border-style: solid solid solid none; border-color: rgb(113, 123, 135) rgb(113, 123, 135) rgb(113, 123, 135) -moz-use-text-color; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); font-weight: normal;" title="Delete Selected"><span style="display: inline-block;"><div style="width: 16px; height: 16px; overflow: hidden; position: relative;"><img style="position: absolute; left: 0px; top: -195px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 16px; height: 350px;" src="drawing.png" draggable="false"></div></span></div></div>'); 

然後，以激活新的按鈕，改變鼠標點擊圖標：

google.maps.event.addDomListener(document.getElementById('btnDelete'), 'click', deleteSelectedShape); 
      google.maps.event.addDomListener(document.getElementById('btnDelete'), 'mousedown', function() { 
    $("#btnDelete img").css("top", "-212px"); 
}); 
      google.maps.event.addDomListener(document.getElementById('btnDelete'), 'mouseup', function() { 
    $("#btnDelete img").css("top", "-195px"); 
}); 

希望這有助於！ :) Dennis