Google Maps API自定义标记未渲染问题求助

以下是导致地图标记不显示的核心问题及对应修复：

1. 未将创建的Marker加入集群数组 #

在addMarker函数中，你初始化了markers数组，但创建完marker后没有将其添加到数组中，导致MarkerClusterer没有可管理的标记，最终标记无法渲染。

修复代码：
在创建marker的代码后添加markers.push(marker);：

// marker funtion
function addMarker() {
    var markers = [];
    for (var i = 0; i < markersOnMap.length; i++) {
        var contentString = '<div id="content"> <p> <b>' + markersOnMap[i].placeName +
            '</b> </p></div>' + '<a target="_blank" href="' + markersOnMap[i].url + '">Show Details</a>';

        const marker = new google.maps.Marker({
            position: markersOnMap[i].LatLng,
            map: map
        });

        // 新增：将创建的marker加入集群数组
        markers.push(marker);

        // ... 剩余监听事件代码保持不变
    }
    // ... 集群初始化代码
}

2. MarkerClusterer的imagePath配置错误 #

你当前的imagePath指向的是MarkerClusterer的JS文件，正确的imagePath应该是集群图标的前缀（Google官方示例的图标前缀为https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m），因为集群图标命名规则为m1.png、m2.png等。

修复代码：

var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

3. 循环闭包问题（导致信息窗口绑定异常） #

用var声明循环变量i会导致所有监听事件引用同一个i值（循环结束后的最大值），进而导致信息窗口显示错误。同时需要确保每个marker对应自己的infowindow。

修复代码：
将循环变量i改为let声明，解决闭包作用域问题：

// 用let代替var，确保每个循环迭代的变量独立
for (let i = 0; i < markersOnMap.length; i++) {
    var contentString = '<div id="content"> <p> <b>' + markersOnMap[i].placeName +
        '</b> </p></div>' + '<a target="_blank" href="' + markersOnMap[i].url + '">Show Details</a>';

    const marker = new google.maps.Marker({
        position: markersOnMap[i].LatLng,
        map: map
    });
    markers.push(marker);

    const infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 200
    });

    marker.addListener('click', function() {
        closeOtherInfo();
        infowindow.open(map, marker);
        InforObj[0] = infowindow;
    });
    marker.addListener('mouseover', function() {
        closeOtherInfo();
        infowindow.open(map, marker);
        InforObj[0] = infowindow;
    });
}

4. 确认LatLng结构是否匹配 #

从你提供的数组截图来看，LatLng是包含lat和lng属性的对象，因此不需要加[0]。如果你的LatLng是数组格式（比如[-6.917, 107.619]），则需要转换为对象格式：

position: {
    lat: markersOnMap[i].LatLng[0],
    lng: markersOnMap[i].LatLng[1]
}

额外检查：确保MarkerClusterer已正确引入 #

确认HTML中已引入MarkerClusterer脚本，例如：

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

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