在GMaps v3 DrawingManager按钮列表中添加自定义按钮

Question

我无法在线找到有关我的问题的高质量信息，所以我来到了这里。我想做的是在Google Maps的DrawingManager的控件中添加一个自定义按钮。

下面是添加通常的opiton组的代码。但是我不知道如何向中添加自己的按钮之一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');
    });
}

这种示例类型重新创建了应用于默认按钮的样式。可能不是完美的，但是您知道了...

JSFiddle demo