是否可以更改Google Maps绘图管理器图标？ [英] Is it possible to change the Google Maps Drawing manager icons?

问题描述

默认的图纸管理器图标（手形，多边形绘图工具）可以在多个设备上使用。在台式机上都不错，但是它们在Android设备上使用起来非常麻烦。任何人都可以告诉我，如果有可能重写默认图标集（http://maps.gstatic.com/mapfiles/drawing.png）我想我可以重写css和html，但希望知道是否有更好的方法才能沿着这条路走下去。

预先致谢。

解决方案

这是我用来修改按钮的东西，它应该给你一个出发点，一旦你的ID改变了，改变CSS就很容易了。

$ b $

  $（。gmnoprint）。each（function（）{
 var newObj = $（this）.find（ title ='Draw a circle']）; 
 newObj.parent（）。addClass（remove）; 
 
 //工具栏ID 
 newObj.parent（） .parent（）。attr（id，btnBar）; 
 
 //现在删除Circle按钮
 $（。remove）。remove（）; 
 
 // ID手形按钮
 newObj = $（this）.find（[title ='停止绘图']）; 
 newObj.attr（'id'，'btnStop '）; 
 
 // ID Mar ker button 
 newObj = $（this）.find（[title ='Add a marker']）; 
 newObj.attr（'id'，'btnMarker'）; 
 
 //线路按钮
 newObj = $（this）.find（[title ='Draw a line']）; 
 newObj.attr（'id'，'btnLine'）; 
 
 // ID矩形按钮
 newObj = $（this）.find（[title ='Draw a rectangle']）; 
 newObj.attr（'id'，'btnRectangle'）; 
 
 // ID多边形按钮
 newObj = $（this）.find（[title ='Draw a shape']）; 
 newObj.attr（'id'，'btnShape'）; 
 
}）; 
  

为了进一步修改它，我将自己的按钮添加到工具栏中，如下所示：

  $（＃btnBar）。append（'< div style =float：left; line-height：0;> < div id =btnDeletestyle =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：固体固体无; 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 =删除所选内容>< span style =display：inline-block;>< div style =width：16px; height：16px; overflow：hidden; position：relative;>&l t; img style =position：absolute; left：0px;顶部：-195px; -moz-user-select：none; border：0px none; padding：0px; margin：0px;宽度：16px; 

< / div>'）;





然后， pre> 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

I'm looking to implement a Google Maps polygon select tool for use on multiple devices.

The default Drawing Manager icons (the hand, the polygon draw tool) are fine on desktop machines, but they are really fiddly to use on and android device. Can anyone tell me if it's possible to override the default icon set (http://maps.gstatic.com/mapfiles/drawing.png)

I suppose I could override css and html specifically, but would love to know if there is an better way before going down that path.

Thanks in advance.

解决方案

This is what I use to modify the buttons, it should give you a starting point, once you ID everthing, changing the CSS is easy..

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

});

To further modify it, I add my own buttons to the tool bar like this:

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

Then, to activate the new button and change the icons on the mouse click:

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

Hope this helps! :) Dennis

这篇关于是否可以更改Google Maps绘图管理器图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！