如何定位并修改Google Maps V3中指定Marker的填充颜色

你通过数组创建了一系列圆形图标Google Maps Marker，想要在所有标记加载完成后，不借助地图事件直接定位第二个标记并修改其填充颜色，核心解决方案是把创建的Marker实例存储到数组中，之后通过数组索引直接访问并修改。

修改后的完整代码 #

let map;
let markers = []; // 用于存储所有Marker实例的数组

async function initMap() {
    // 中心点位置
    const position = { lat: 40.44396002705076, lng: -80.00466302883518 };
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
     
    // 初始化地图
    map = new Map(document.getElementById("map"), {
        zoom: 15,
        center: position,
        mapId: "6366bc12ac68e27f",
    });

    const arrMuralPositions = [
        { lat: 40.44215080214157, lng: -80.00194178463394 }, // 站点1
        { lat: 40.44219643284648, lng: -79.99723183193605 },// 站点2
        { lat: 40.44147920270817, lng: -79.99549375400392 },// 站点3
    ];

    for (let i = 0; i < arrMuralPositions.length; i++) {
        const myLabel = (i + 1).toString();
        // 创建Marker并保存到数组
        const marker = new google.maps.Marker({
            position: arrMuralPositions[i],
            label: {text: myLabel, color: "white"},
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 10,
                fillColor: "#376cb9",
                strokeColor: "#376cb9",
                fillOpacity: 1,
                strokeWeight: 1,
            },
            map: map,
        });
        markers.push(marker);
    }
}

// 初始化地图后修改第二个标记的颜色
initMap().then(() => {
    // 数组索引从0开始，第二个标记对应索引1
    const targetMarker = markers[1];
    if (targetMarker) {
        // 复制原图标配置，避免直接修改原对象
        const updatedIcon = {...targetMarker.getIcon()};
        updatedIcon.fillColor = "#ff0000"; // 设置新的填充色（红色示例）
        updatedIcon.strokeColor = "#ff0000"; // 可选：同步修改边框颜色
        targetMarker.setIcon(updatedIcon); // 更新标记图标
    }
});

关键说明 #

1. 存储Marker实例：新增markers数组，在循环创建Marker时，将每个实例push到数组中，这样后续可以通过索引直接定位目标标记。
2. 异步处理：因为initMap是异步函数，必须等待它执行完成（通过.then()）才能访问markers数组，否则数组会是空的。
3. 更新图标属性：不能直接修改marker.icon.fillColor，需要通过getIcon()获取当前图标配置，修改后再调用setIcon()方法更新，这样Google Maps才会重新渲染标记样式。

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