Có thể thay đổi biểu tượng Trình quản lý bản vẽ của Google Maps không?

Question

Tôi đang tìm cách triển khai công cụ chọn đa giác của Google Maps để sử dụng trên nhiều thiết bị.

Các biểu tượng Trình quản lý bản vẽ mặc định (bàn tay, công cụ vẽ đa giác) là tốt trên máy tính để bàn, nhưng chúng thực sự không sử dụng được trên thiết bị Android. Bất cứ ai có thể cho tôi biết nếu có thể ghi đè lên bộ biểu tượng mặc định (http://maps.gstatic.com/mapfiles/drawing.png)

Tôi cho rằng tôi có thể ghi đè lên css và html một cách cụ thể, nhưng rất muốn biết có một cách tốt hơn trước khi đi xuống con đường đó.

Xin cảm ơn trước.

Answer 1

Đây là những gì tôi sử dụng để sửa đổi các nút, nó sẽ cho bạn một điểm khởi đầu, một khi bạn ID everthing, thay đổi CSS rất dễ dàng ..

$(".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'); 

}); 

Tiếp tục sửa đổi nó, tôi thêm của riêng tôi nút vào thanh công cụ như thế này:

$("#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>'); 

Sau đó, để kích hoạt nút mới và thay đổi các biểu tượng trên click chuột:

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"); 
}); 

Hy vọng điều này sẽ hữu ích! :) Dennis