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

Question

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

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

隐藏绘图控件会使绘图工具控件不显示，但是DrawingManager类的所有功能仍然可用。通过这种方式，如果需要，可以实现自己的控件。从地图对象中删除DrawingManager将禁用所有绘图功能；如果要恢复绘图功能，则必须使用drawingManager.setMap(map)重新将其附加到地图上，或者构造一个新的DrawingManager对象。

但是我找不到如何使用DrawingManager来实现此操作。

- tdurand

Answer 1

在按钮点击时：

打开绘图标记： drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);

关闭： drawingManager.setDrawingMode(null);

- user1226919

---

同样适用于，OverlayType.CIRCLE，OverlayType.POLYGON。 - Someone

Answer 2

你可以：

1. 创建一个没有控件或省略某些控件的DrawingManager，然后
2. 为它们添加自定义按钮，然后
3. 添加处理程序以触发@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

- bozdoz

---

我喜欢这个答案，因为它的fiddle非常好用。 - Piotrek Zatorski

请注意，.setDrawingModer(null) 将把光标设置为小手，您可以使用它选择绘制的对象并移动地图。 - nabrown