ASP.NET MVC中点击Google Maps信息窗按钮修改Marker颜色的问题求助

你的问题主要出在循环变量作用域和动态内容的事件绑定上，另外多个按钮使用同一个id="aceite"也会导致选择器失效（id必须唯一）。下面是具体的解决方案：

核心问题分析 #

• 循环作用域问题：你在for循环里声明的marker变量是函数级作用域，当循环结束后，所有点击事件引用的都是最后一个marker实例，不是当前对应的那个。
• 动态内容事件绑定失效：InfoWindow的内容是字符串形式插入的，直接用onclick="state(marker)"时，marker变量在按钮点击时已经不是循环时的那个实例了，浏览器找不到正确的引用。
• 重复ID：多个InfoWindow里的按钮都用id="aceite"，document.getElementById只会返回第一个匹配的元素，无法区分不同Marker的按钮。

修正后的完整代码 #

var locations = [
    ["Recusado", "13/02/2019", 38.776816, -9.441833, 335, "foto.jpg"],
    ["Aceite", "15/08/2019", 38.817562, -8.941728, 36, "foto.jpg"],
    ["Em avaliação", "20/07/2019", 38.487978, -9.004425, 90, "foto.jpg"],
    ["Concluído", "01/07/2019", 37.045804, -8.898041, 12, "foto.jpg"]
];

function setMarkers(map) {
    for (var i = 0; i < locations.length; i++) {
        // 用自执行函数保存当前循环的marker和数据，解决作用域问题
        (function(fire) {
            var marker = new google.maps.Marker({
                position: { lat: fire[2], lng: fire[3] },
                map: map,
                icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
            });

            // 构建InfoWindow内容，去掉重复id，用class区分按钮
            var contentString = '<div class="info-window-content">' +
                '<div id="siteNotice"></div>' +
                '<div id="bodyContent">' +
                '<p><b>Avaliação da Ocorrência:</b></p>' +
                '<p>Fotografias:' + fire[5] + '</p>' +
                '<p>Avaliação:' + fire[0] + '</p>' +
                '<p>Data:' + fire[1] + '</p></br>' +
                '<button class="btn-aceite">Aceite</button>' +
                '<button class="btn-recusado">Recusado</button>' +
                '<button class="btn-avaliacao">Em avaliação</button>' +
                '<button class="btn-concluido">Concluído</button>' +
                '</div></div>';

            var infoWindow = new google.maps.InfoWindow({ content: contentString });

            // Marker点击事件
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.open(map, this);
                
                // 监听InfoWindow的domready事件，确保内容已加载到DOM
                google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
                    // 给当前InfoWindow里的按钮绑定点击事件
                    document.querySelector('.btn-aceite').addEventListener('click', function() {
                        marker.setIcon('http://maps.google.com/mapfiles/marker_green.png');
                    });
                    document.querySelector('.btn-recusado').addEventListener('click', function() {
                        marker.setIcon('http://maps.google.com/mapfiles/marker_red.png');
                    });
                    document.querySelector('.btn-avaliacao').addEventListener('click', function() {
                        marker.setIcon('http://maps.google.com/mapfiles/marker_yellow.png');
                    });
                    document.querySelector('.btn-concluido').addEventListener('click', function() {
                        marker.setIcon('http://maps.google.com/mapfiles/marker_purple.png');
                    });
                });
            });
        })(locations[i]); // 传入当前循环的fire数据
    }
}

关键修改点说明 #

1. 自执行函数解决作用域：把循环内的代码包裹在自执行函数里，每次循环传入当前的fire数据，确保每个Marker和对应的InfoWindow按钮引用的都是正确的实例。
2. 用class代替重复id：把按钮的id改成唯一的class，避免DOM选择器冲突。
3. 监听InfoWindow的domready事件：只有当InfoWindow的内容被渲染到DOM后，才能获取到按钮元素并绑定事件，这是动态内容事件绑定的关键。
4. 直接绑定事件到按钮：在domready事件里通过querySelector获取当前InfoWindow内的按钮，然后添加点击事件，直接操作对应的marker实例修改图标。

这样修改后，点击每个InfoWindow里的按钮，就能准确修改对应Marker的颜色了。

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