带有谷歌地图绘图的自定义按钮

Custom button with Google Maps Drawing

本文关键字：自定义 按钮 绘图 谷歌地图      更新时间：2023-09-26

>我正在使用与谷歌地图关联的绘图工具：

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.POLYGON,
            ]
        },
    });
    drawingManager.setMap(map);

这工作正常，但我想知道如何使用自定义按钮而不是多边形工具的默认控件。这样，当我按下按钮时，它处于活动状态，当我再次按下它时，它会停用它。

这是我的自定义工具栏：

<div id="toolbar-container" class="toolbar-container">
    <div class="toolbar no-select">
        <div class="toolbar-button" id="clear-button">Clear Polygon</div>
        <div class="toolbar-button" id="polygon-button">Polygon</div>
    </div>
</div>

我尝试浏览 api，但找不到任何东西。

作为参考，这是我使用的网站：https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

任何帮助将不胜感激！

有一种

预定义的方法可以在 Google Maps API 中创建新的自定义控件和事件处理。

我已经在初始化（）函数中创建了新控件

// Create the DIV to hold the control and call the HomeControl() constructor
    var homeControlDiv = document.createElement('div');
    var homeControl = new HomeControl(homeControlDiv, map);
    homeControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(homeControlDiv);
//To set CSS and handling event for the control
    function HomeControl(controlDiv, map) {
        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = 'blue';       
        controlUI.style.height = '23px';
        controlUI.style.marginTop = '5px';
        controlUI.style.marginLeft = '-9px';
        controlUI.style.paddingTop = '1px';
        controlUI.style.cursor = 'pointer';        
        controlUI.title = 'Your Custom function..';
        controlDiv.appendChild(controlUI);
        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.style.padding = '11px';
        controlText.innerHTML = 'Custom Text';
        controlText.style.color = '#fff';    
        controlUI.appendChild(controlText);
        // Setup the click event listeners
        google.maps.event.addDomListener(controlUI, 'click', function () {
            alert('Your Custom function..');            
        });
    }

希望这会对你有所帮助..看看我的小提琴这里

相关文章：