多次切换Google Maps多边形功能异常求助

问题描述 #

通过复选框控制Google Maps多边形显示/隐藏时，多次点击后出现异常：从第四次点击开始，多边形会重复绘制且显示为白色。当前实现逻辑为：将多边形坐标存储在隐藏文本框，点击复选框调用displaypolygons函数，通过全局数组gpolygons存储多边形实例，togglePolygon函数遍历数组控制显示/隐藏。

问题根源 #

1. 重复创建多边形：每次勾选复选框时，未检查该ID的多边形是否已存在于gpolygons数组，直接执行创建逻辑，导致数组中出现多个同ID的多边形实例。
2. 标签与多边形索引不匹配：togglePolygon通过数组索引操作labelObjects，当存在多个同ID多边形时，索引对应关系混乱；同时代码中地图变量名写错（mymap应为map）。
3. 全局变量污染：bermudaTriangle、bounds未用var/let/const声明，成为全局变量，导致后续实例被覆盖或引发冲突。
4. 样式设计缺陷：填充色和描边色均设为白色#ffffff，在浅色地图底图上几乎不可见，被误认为“形状变白”。

修复方案 #

1. 避免重复创建多边形 #

在displaypolygons函数开头添加检查逻辑，若该ID的多边形已存在，直接切换显示状态，不再重复创建：

// 先声明全局数组
let gpolygons = [];
let labelObjects = [];
let map;

function displaypolygons(ai) {
    // 检查是否已有该ID的多边形
    const existingPoly = gpolygons.find(poly => poly._uniqueId === ai);
    const isChecked = $('#cb_' + ai).is(":checked");

    if (!isChecked) {
        return togglePolygon(ai);
    }

    if (existingPoly) {
        // 已有多边形则直接显示
        existingPoly.setMap(map);
        // 同步显示对应标签
        const labelIdx = gpolygons.indexOf(existingPoly);
        if (labelObjects[labelIdx]) {
            labelObjects[labelIdx].setMap(map);
        }
        return;
    }

    // 坐标解析逻辑（修复空值问题）
    const selLatLon = document.getElementById("latlon_"+ai).value;
    document.getElementById("coords").value = selLatLon;
    const cleanedCoords = selLatLon.replaceAll("(", "").split(")").filter(item => item.trim() !== "");
    
    const triangleCoords = [];
    cleanedCoords.forEach(item => {
        const [lat, lng] = item.split(",").map(val => parseFloat(val.trim()));
        triangleCoords.push(new google.maps.LatLng({lat, lng}));
    });

    // 计算中心点
    const bounds = new google.maps.LatLngBounds();
    triangleCoords.forEach(coord => bounds.extend(coord));

    // 创建多边形（用局部变量避免全局污染）
    const newPolygon = new google.maps.Polygon({
        _uniqueId: ai,    
        paths: triangleCoords,
        strokeWeight: 2,
        fillOpacity: 0.45,
        fillColor: '#ffcccc', // 替换为浅红色，避免和底图混淆
        strokeColor: '#ff0000', // 红色描边增强辨识度
        editable: false,
        draggable: false
    });
    newPolygon.setMap(map);
    gpolygons.push(newPolygon);

    map.setCenter(bounds.getCenter(), 14); // 调整缩放层级至合适范围

    // 创建标签
    const areaLabel = document.getElementById("area_"+ai).value;
    const mapLabel = new MapLabel({
        text: `${areaLabel} (Id: ${ai})`,
        position: bounds.getCenter(),
        map: map,
        fontSize: 14,
        align: 'center'
    });
    labelObjects.push(mapLabel);
};

2. 修复togglePolygon函数逻辑 #

修正变量名错误，改用forEach遍历数组，确保多边形与标签同步切换：

function togglePolygon(id) {
    gpolygons.forEach((poly, index) => {
        if (poly._uniqueId === id) {
            const currentMap = poly.getMap();
            poly.setMap(currentMap ? null : map);
            
            // 同步切换对应标签
            if (labelObjects[index]) {
                labelObjects[index].setMap(currentMap ? null : map);
            }
        }
    });
}

3. 完善地图初始化 #

确保initMap函数正确初始化地图实例：

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 11.05, lng: 77.04},
        zoom: 14
    });
}

google.maps.event.addDomListener(window,"load", initMap);

内容的提问来源于stack exchange，提问作者Shanthini Priyadharsini G