Question

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

添加通常的一组opitons的代码如下。但我无法弄清楚如何将自己的按钮添加到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

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

1 个答案: