如何在Google Maps JS v3.50绘制多边形时实时统计顶点数

要在绘制Polygon的过程中实时统计顶点数，你可以通过监听绘制模式变化和地图点击事件来实现，具体方案如下：

步骤1：添加显示顶点数的DOM元素 #

在页面中添加一个用于展示实时顶点数的元素：

<div id="vertex-count" style="position: absolute; top: 10px; right: 10px; background: #fff; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"></div>

步骤2：修改JavaScript代码，添加实时计数逻辑 #

在你现有的DrawingManager代码基础上，加入顶点数跟踪和事件监听：

let drawingManager = new google.maps.drawing.DrawingManager({
    drawingControl       : true,
    drawingControlOptions: {
        position    : google.maps.ControlPosition.BOTTOM_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    },
    markerOptions        : {
        draggable: true,
    },
    polygonOptions       : {
        editable     : false,
        strokeColor  : '#00B700',
        strokeOpacity: 0.8,
        strokeWeight : 2,
        fillColor    : '#00B700',
        fillOpacity  : 0.35
    }
});

drawingManager.setMap(map);

// 顶点数跟踪变量
let vertexCount = 0;
const vertexCountElement = document.getElementById('vertex-count');
let mapClickListener = null;

// 监听绘制模式切换
google.maps.event.addListener(drawingManager, 'drawingmode_changed', function() {
    const currentMode = drawingManager.getDrawingMode();

    if (currentMode === google.maps.drawing.OverlayType.POLYGON) {
        // 重置计数并初始化显示
        vertexCount = 0;
        vertexCountElement.textContent = `当前顶点数：${vertexCount}`;

        // 监听地图点击，每次点击增加顶点计数
        mapClickListener = google.maps.event.addListener(map, 'click', function() {
            vertexCount++;
            vertexCountElement.textContent = `当前顶点数：${vertexCount}`;
        });

        // 绘制完成或取消时清理监听
        const cleanupListeners = function() {
            if (mapClickListener) {
                google.maps.event.removeListener(mapClickListener);
                mapClickListener = null;
            }
            // 可选：绘制完成后保留最终顶点数显示
            // vertexCountElement.textContent = `最终顶点数：${vertexCount}`;
        };

        // 监听多边形绘制完成事件
        google.maps.event.addListenerOnce(drawingManager, 'polygoncomplete', cleanupListeners);
        // 监听绘制模式取消事件
        google.maps.event.addListenerOnce(drawingManager, 'drawingmode_changed', cleanupListeners);
    }
});

// 原有事件监听保持不变
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
    if ( shapeCodeInputVar ) shapeCodeInputVar.val(MAP_SHAPE_CODE_POLYGON);
    if ( locInputVar ) locInputVar.val(fnGetLocation(polygon, MAP_SHAPE_POLYGON));
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
    currentOverlay = e.overlay;
    drawingManager.setDrawingMode(null);
});

逻辑说明 #

• 当DrawingManager切换到Polygon绘制模式时，重置顶点计数并开始监听地图的点击事件；
• 每次点击地图添加顶点时，计数自动递增并更新页面显示；
• 当绘制完成（触发polygoncomplete）或用户取消绘制（再次切换绘制模式）时，移除地图点击监听，避免干扰后续操作；
• 双击完成绘制时，最后一次双击的点击也会被计入顶点数，符合多边形顶点的实际数量（闭合前的最后一个顶点）。

内容的提问来源于stack exchange，提问作者Tony