Question

我正在使用Google Maps API的绘图库，我想触发使用自定义按钮绘制标记。

我已经阅读了文档的这一部分：

隐藏绘图控件会导致绘图工具控件无法显示，但DrawingManager类的所有功能仍然可用。这样，您可以根据需要实现自己的控件。从地图对象中删除DrawingManager会禁用所有绘图功能;如果要恢复绘图功能，必须使用drawingManager.setMap（map）将其重新附加到地图，或者构造新的DrawingManager对象。

但是我无法找到如何使用DrawingManager来做到这一点。

Answer 1

点击按钮

：

启用绘图标记： drawingManager.setDrawingMode（google.maps.drawing.OverlayType.MARKER）;

关闭： drawingManager.setDrawingMode（NULL）;

Answer 2

你可以：

创建没有控件的DrawingManager，或者省略某些控件，然后
为他们添加自定义按钮，然后
为这些按钮添加处理程序以触发@ user1226919提及的功能。

示例：

var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControl: false
});
drawingManager.setMap(map);

// drawingManager is now ready

var marker_btn = document.createElement("button");
marker_btn.innerHTML = "Create Marker";

// add handlers
marker_btn.addEventListener("click", (function () {
    // closure handles local toggle variables
    var toggled = false;
    var originalHTML = marker_btn.innerHTML;
    return function (e) {
        if (toggled) {
            drawingManager.setDrawingMode(null);
            e.target.innerHTML = originalHTML;
        } else {
            drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
            e.target.innerHTML = "Cancel";
        }
        toggled = !toggled;
    }
})());

// add button to map controls
map.controls[ google.maps.ControlPosition.TOP_CENTER ].push( marker_btn );

使用自定义多边形按钮查看工作示例：https://codepen.io/bozdoz/pen/jZNXNP?editors=0010

自定义绘图控件[Google Maps v3绘图库]

2 个答案: