在地图上重新删除多个Google地图标记而不重绘

Question

我有一套较大的(~1,300)标记,我将它放在时间轴上的地图上.基本上就像播放视频一样,在时间序列上,标记google.maps.Animation.DROP在地图上使用.我们有标准的视频/音频播放器类型控件,允许您导航时间线:播放/暂停,跳到开始,跳到结束,以及在时间线内任意移动的滑块条.

如果我从地图开始为空并且时间线在开头处暂停然后跳到结尾,则会有一个短暂的延迟,因为所有这些标记对象都被创建,然后它们一起掉到地图上.这可以.

一旦放置了标记并且用户在时间线中向后移动(到特定标记不再可见的点),我执行a marker.setMap(null)并且标记被隐藏.从我读到的这是删除标记的正确方法,它的工作原理.

如果您创建/删除所有(或大量)标记,然后导航回时间轴(以便删除大量标记),则会出现一个大问题,然后再次向前跳转.这会在地图上产生令人讨厌的针脚闪光,然后消失并突然从地图顶部掉落.

如上所述,第一次引脚掉落时会发生正确的效果(引脚掉入但未预先出现在地图上),但随后的下降会导致这种奇怪的行为.对于少量引脚而言,这在很大程度上是难以察觉的,但是有很多引脚会让人分心.

似乎标记的内部状态中必定存在某些marker.setMap(null)未真正重置的内容,但我完全不确定它可能是什么.

我最初根据需要创建了新标记,然后在它们消失时将其销毁,但这种开销使得事情变得迟缓.从理论上讲,我觉得我的方法应该贯穿始终,但我基本上得到了一个具有正确效果的好镜头,并且重复表现得非常糟糕.

有没有人看到我做错了什么或有关于如何使这种行为的建议？

添加引脚,显示和隐藏的逻辑大致如下:

Realtime.prototype.placePin = function(ent) {
    var ctxt = this;

    ent.latLng = new google.maps.LatLng(ent.lat, ent.lng);

    ent.marker = new google.maps.Marker({
        position: ent.latLng,
        map: null,
        animation: google.maps.Animation.DROP,
        optimized: false
    });
};

Realtime.prototype.tick = function(force_tick) {
    var ctxt = this;

    if ((!ctxt.playing || ctxt.dragging) && !force_tick) {
        return;
    } else {
        ctxt.time += ctxt.per_tick;
    }
    ctxt.nowDate = new Date(ctxt.time * 1000);

    ctxt.pins_to_drop = [];     
    for (var i = 0, l = ctxt.entries.length; i < l; i++) {
        var ent = ctxt.entries[i];
        var ent_date = new Date(ent.created + ' UTC');
        if (ent_date < ctxt.nowDate) {
            if (!ent.marker || ent.marker.map == null) {
                if (!ent.marker) {
                    ctxt.placePin(ent);
                }
                ctxt.pins_to_drop.push(ent);
            }
        } else {
            if (ent.marker && ent.marker.map != null) {
                ent.marker.setMap(null);
            }
        }
    }

    ctxt.updateUI();

};

Realtime.prototype.updateUI = function() {
    var ctxt = this;

    for (var i = 0, l = ctxt.pins_to_drop.length; i < l; i++) {
        var ent = ctxt.pins_to_drop[i];
        ent.marker.setMap(null);
        ent.marker.setAnimation(google.maps.Animation.DROP);
        ent.marker.setMap(ctxt.map);
    }
};

Answer 1

请参阅更新的小提琴 ，我不确定它是否解决了您的问题，但隐藏/取消隐藏标记的另一种方法是调用setVisible()标记为marker.setVisible(boolean)。在这种情况下，放置动画仅在第一次使用，因为setVisible()标记已经关联，因此不会再次将其与地图关联。