google-maps-api-3 - 是否可以更改 Google 地图绘图管理器图标？

Question

我正在寻找实现在多个设备上使用的谷歌地图多边形选择工具。

默认的绘图管理器图标（手，多边形绘图工具）在台式机上很好，但在安卓设备上使用它们真的很繁琐。谁能告诉我是否可以覆盖默认图标集（http://maps.gstatic.com/mapfiles/drawing.png）

我想我可以专门覆盖css和html，但很想知道在走这条路之前是否有更好的方法。

提前致谢。

Answer 1

这就是我用来修改按钮的方法，它应该给你一个起点，一旦你确定了一切，改变 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");
});

希望这可以帮助！:) 丹尼斯

Answer 2

这是我用来覆盖按钮样式的 CSS 代码。

在我的情况下，图标的 HTML 看起来像这样

<div class="gmnoprint" style="margin: 5px; z-index: 10; position: absolute; top: 0px; left: 310px;">
    <div style="float: left; line-height: 0;">
        <div role="button" tabindex="0" title="Parar de desenhar" aria-label="Parar de desenhar" aria-pressed="true" draggable="false" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 4px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; font-weight: 500;">
            <span style="display: inline-block;">
                <div style="width: 16px; height: 16px; overflow: hidden; position: relative;">
                    <img alt="" src="https://maps.gstatic.com/mapfiles/drawing.png" draggable="false" style="position: absolute; left: 0px; top: -144px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 16px; height: 192px;">
                </div>
            </span>
        </div>
    </div>
    <div style="float: left; line-height: 0;">
        <div role="button" tabindex="0" title="Desenhar uma forma" aria-label="Desenhar uma forma" aria-pressed="false" draggable="false" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 4px; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-left: 0px;">
            <span style="display: inline-block;">
                <div style="width: 16px; height: 16px; overflow: hidden; position: relative;">
                    <img alt="" src="https://maps.gstatic.com/mapfiles/drawing.png" draggable="false" style="position: absolute; left: 0px; top: -64px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 16px; height: 192px;">
                </div>
            </span>
        </div>
    </div>
    <div style="float: left; line-height: 0;">
        <div role="button" tabindex="0" title="Desenhar um círculo" aria-label="Desenhar um círculo" aria-pressed="false" draggable="false" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 4px; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-left: 0px;">
            <span style="display: inline-block;">
                <div style="width: 16px; height: 16px; overflow: hidden; position: relative;">
                    <img alt="" src="https://maps.gstatic.com/mapfiles/drawing.png" draggable="false" style="position: absolute; left: 0px; top: -160px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 16px; height: 192px;">
                </div>
            </span>
        </div>
    </div>
    <div style="float: left; line-height: 0;">
        <div role="button" tabindex="0" title="Desenhar um retângulo" aria-label="Desenhar um retângulo" aria-pressed="false" draggable="false" style="direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 4px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-left: 0px;">
            <span style="display: inline-block;">
                <div style="width: 16px; height: 16px; overflow: hidden; position: relative;">
                    <img alt="" src="https://maps.gstatic.com/mapfiles/drawing.png" draggable="false" style="position: absolute; left: 0px; top: -16px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 16px; height: 192px;">
                </div>
            </span>
        </div>
    </div>
</div>

应用的 CSS 样式

.gmnoprint > div > div[role=button] {
    width: 44px;
    height: 44px;
    vertical-align: middle;
    line-height: 40px;
    text-align: center;
}

.gmnoprint > div > div[role=button] > span > div > img {
    display: none;
}

.gmnoprint > div > div[role=button] > span > div:before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f007";
    font-size: 22px;
}