添加一个自定义按钮到GMaps v3 DrawingManager按钮列表

Question

我在网上找不到关于我的问题的高质量信息，所以我来到这里。我想做的是添加一个自定义按钮的谷歌地图的DrawingManager的控件。

添加常用选项集的代码如下所示。但是我不知道如何添加一个我自己的按钮到drawingModes。

var drawingManager = new google.maps.drawing.DrawingManager({
        //drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              google.maps.drawing.OverlayType.MARKER,
              google.maps.drawing.OverlayType.CIRCLE,
              google.maps.drawing.OverlayType.POLYGON,
              google.maps.drawing.OverlayType.POLYLINE,
              google.maps.drawing.OverlayType.RECTANGLE
              //how do I add my special little button here?
            ]
        }
    });
    drawingManager.setMap(map);

Answer 1

您需要创建自己的按钮。你可以这样做:

// Create the DIV to hold the control and call the CustomControl() constructor passing in this DIV.
var customControlDiv = document.createElement('div');
var customControl = new CustomControl(customControlDiv, map);
customControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv);
function CustomControl(controlDiv, map) {
    // Set CSS for the control border
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#ffff99';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '1px';
    controlUI.style.borderColor = '#ccc';
    controlUI.style.height = '23px';
    controlUI.style.marginTop = '5px';
    controlUI.style.marginLeft = '-6px';
    controlUI.style.paddingTop = '1px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to set the map to Home';
    controlDiv.appendChild(controlUI);
    // Set CSS for the control interior
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '10px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.style.marginTop = '-8px';
    controlText.innerHTML = 'Custom';
    controlUI.appendChild(controlText);
    // Setup the click event listeners
    google.maps.event.addDomListener(controlUI, 'click', function () {
        alert('Custom control clicked');
    });
}

这个例子重新创建了应用于默认按钮的样式。可能不完美，但你知道的…

<<p> JSFiddle演示/kbd>