如何实现Google地图标记逐个下落加载（含OverlappingMarkerSpiderfier）

嘿，我懂你现在的需求——想让那300+标记不是一次性扎堆出现在地图上，而是带着下落动画逐个“落”到对应位置对吧？刚好结合你现有的OverlappingMarkerSpiderfier代码，咱们可以这么调整：

核心改动思路 #

原来的代码是在for循环里一次性创建并添加所有标记，所以会瞬间全部显示。要实现逐个下落，咱们需要：

• 给标记加上DROP动画属性
• 把标记的创建和添加改成异步分批执行，用setTimeout控制每个标记的添加间隔，避免阻塞
• 处理好循环中的变量作用域问题，防止标记信息串错

修改后的完整代码 #

<script>
function decodeAddr(callback, map) {
    var jsonData = jQuery.ajax({
        url: "static/data.json",
        dataType: "json",
        async: false
    }).responseText;
    var addresses = JSON.parse(jsonData);
    callback(addresses, map);
};
function getHC(key) {
    var hc = jQuery.ajax({
        async: false,
        dataType: "text",
        cache: false,
        url: "/static/periodicHC/" + key.substring(0,11)
    }).responseText;
    return(hc);
};
function initMap(addresses, map) {
    var zColors = {"green" : 1, "yellow" : 2, "red" : 3};
    var iw = new InfoBubble();
    var oms = new OverlappingMarkerSpiderfier(map, {
        markersWontMove: true,
        markersWontHide: true,
        basicFormatEvents: true
    });

    // 把所有key转换成数组，方便逐个处理
    const addrKeys = Object.keys(addresses['ASRAddr']);
    const markerInterval = 50; // 每个标记下落的间隔，单位毫秒，可根据需求调整

    // 封装创建和添加标记的函数
    function createAndAddMarker(index) {
        if (index >= addrKeys.length) return; // 所有标记处理完就停止

        const key = addrKeys[index];
        const addrItem = addresses['ASRAddr'][key];
        var state = addrItem['state'];
        var position = new google.maps.LatLng(addrItem['latitude'], addrItem['longitude']);
        
        var marker = new google.maps.Marker({
            position: position,
            map: map,
            title: key + '\n' + addrItem['phyAddr'] + '\n\n' + getHC(key),
            zIndex: zColors[state],
            icon: "/static/images/googleMaps/" + state + "_MarkerA.png",
            animation: google.maps.Animation.DROP // 添加上下落动画
        });

        google.maps.event.addListener(marker, 'spider_click', function(e) {
            marker.addListener('mouseover', () => iw.open(map, marker));
            marker.addListener('mouseout', () => iw.close());
        });

        oms.addMarker(marker);

        // 递归调用，处理下一个标记
        setTimeout(() => createAndAddMarker(index + 1), markerInterval);
    }

    // 启动逐个添加标记的流程
    createAndAddMarker(0);
}
function initPage() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: new google.maps.LatLng(38.0000, -97.0000)
    });
    google.maps.event.addListenerOnce(map, 'idle', function(){
        decodeAddr(initMap, map);
    });
}
</script>

关键改动说明 #

1. 把key转换成数组：用Object.keys()把addresses['ASRAddr']的键转换成数组，方便按顺序逐个处理
2. 封装标记创建函数：把原来循环里的标记创建逻辑抽成createAndAddMarker函数，通过递归+setTimeout实现逐个添加
3. 添加下落动画：给Marker实例加上animation: google.maps.Animation.DROP属性，触发下落效果
4. 控制间隔时间：通过markerInterval变量调整每个标记的下落间隔，数值越小速度越快，可根据你的需求自行调整
5. 避免作用域问题：因为是按索引逐个处理，每个标记的信息都是独立的，不会出现循环中常见的变量绑定错误

这样修改后，地图加载完成后，标记就会带着下落动画，一个接一个地出现在对应的位置上啦～

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