如何通过Ajax调用修改Google地图中的PolyLine（折线）颜色？

看起来你已经通过PHP循环生成了多个带唯一ID的PolyLine，但直接用单独变量（line<?= $connection->id ?>）维护和更新它们会比较繁琐。这里给你一套更优雅的解决方案，让你能通过Ajax轻松更新指定PolyLine的颜色：

第一步：重构PolyLine的存储方式 #

别把每个PolyLine存成单独的全局变量，改用一个全局对象统一管理——键为连接ID，值为对应的PolyLine实例，后续通过ID查找和操作会非常方便：

<script>
// 创建全局对象存储所有PolyLine
window.polylines = {};

<?php foreach ($yourConnectionsArray as $connection): ?>
    // 假设$startLat、$endLat等变量在循环中已正确赋值
    window.polylines[<?= $connection->id ?>] = new google.maps.Polyline({
        path: [
            new google.maps.LatLng(<?= $startLat ?>, <?= $startLng ?>),
            new google.maps.LatLng(<?= $endLat ?>, <?= $endLng ?>)
        ],
        strokeColor: '#888888', // 设置默认颜色，后续由Ajax更新
        strokeOpacity: 1.0,
        strokeWeight: 6,
        map: map
    });
<?php endforeach; ?>
</script>

第二步：编写Ajax更新逻辑 #

你可以根据场景选择批量更新所有PolyLine或者单独更新单个PolyLine，两种方案如下：

方案1：批量更新所有连接的颜色 #

适合后端能一次性返回所有连接最新颜色状态的场景：

function updateAllPolylineColors() {
    $.ajax({
        url: '/datacenter-connection/check',
        dataType: 'json',
        success: function(response) {
            // 假设后端返回格式：{ "connections": [{ "id": 1, "color": "#ff0000" }, { "id": 2, "color": "#00ff00" }] }
            if (response.connections && Array.isArray(response.connections)) {
                response.connections.forEach(function(conn) {
                    // 根据ID找到对应的PolyLine
                    const targetLine = window.polylines[conn.id];
                    if (targetLine) {
                        // 使用Google Maps API的setOptions方法更新颜色（官方推荐的修改属性方式）
                        targetLine.setOptions({ strokeColor: conn.color });
                    }
                });
            }
            // 5秒后再次调用，实现实时刷新
            setTimeout(updateAllPolylineColors, 5000);
        },
        error: function() {
            // 请求出错时延长重试间隔，避免频繁请求
            setTimeout(updateAllPolylineColors, 10000);
        }
    });
}

// 页面加载完成后启动更新
$(document).ready(function() {
    updateAllPolylineColors();
});

方案2：单独更新单个连接的颜色 #

如果需要针对每个连接单独发起请求（比如每个连接的状态更新频率不同）：

function updateSinglePolyline(connectionId) {
    $.ajax({
        url: '/datacenter-connection/check',
        data: { id: connectionId },
        dataType: 'json',
        success: function(response) {
            const targetLine = window.polylines[connectionId];
            if (targetLine && response.color) {
                targetLine.setOptions({ strokeColor: response.color });
            }
            // 继续定时更新当前连接
            setTimeout(() => updateSinglePolyline(connectionId), 5000);
        },
        error: function() {
            setTimeout(() => updateSinglePolyline(connectionId), 10000);
        }
    });
}

// 页面加载时为每个连接启动单独的更新任务
<?php foreach ($yourConnectionsArray as $connection): ?>
    updateSinglePolyline(<?= $connection->id ?>);
<?php endforeach; ?>

关键注意事项 #

• 必须使用Google Maps API提供的setOptions()方法修改PolyLine属性，直接修改strokeColor不会触发地图重绘，导致颜色不更新。
• 全局对象window.polylines要确保在所有PolyLine生成前定义，避免出现未定义错误。
• 后端接口需要返回正确的JSON格式数据，包含连接ID和对应的十六进制颜色值（比如#ff0000）。

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