9

複数のデバイスで使用するためのGoogleマップポリゴン選択ツールを実装したいと考えています。

デフォルトのDrawingManagerアイコン（手、ポリゴン描画ツール）は、デスクトップマシンでは問題ありませんが、Androidデバイスで使用するのは非常に面倒です。デフォルトのアイコンセットを上書きできるかどうか誰か教えてもらえますか（http://maps.gstatic.com/mapfiles/drawing.png）

私はcssとhtmlを具体的にオーバーライドできると思いますが、その道を進む前にもっと良い方法があるかどうか知りたいです。

前もって感謝します。

4

2 に答える 2

10

これは私がボタンを変更するために使用するものです。開始点を提供する必要があります。すべてを識別したら、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");
});

お役に立てれば！:) デニス

于 2012-12-03T14:55:49.070 に答える