Пользовательский элемент управления рисованием [Google Maps v3 Drawing Library]

Question

Я работаю с библиотекой чертежей API Карт Google и хочу запустить рисование маркера с помощью пользовательской кнопки.

Я прочитал эту часть документации:

При скрытии элемента управления рисованием элемент управления средствами рисования не отображается, но все функции класса DrawingManager по-прежнему доступны.Таким образом, вы можете реализовать свой собственный контроль, если хотите.Удаление DrawingManager из объекта карты отключает все функции рисования;он должен быть снова присоединен к карте с помощью метода DrawingManager.setMap (map) или нового объекта DrawingManager, если необходимо восстановить элементы чертежа.

Но я не могу узнать, как использоватьDrawingManager для этого.

Answer 1

при нажатии кнопки:

включить маркер рисования: DrawingManager.setDrawingMode (google.maps.drawing.OverlayType.MARKER);

выключить: DrawingManager.setDrawingMode (null);

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