Question

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

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

一旦放置了标记并且用户在时间线中向后移动（到不应再看到特定标记的点），我执行marker.setMap(null)并隐藏标记。从我read开始，这是删除标记的正确方法，它可以正常工作。

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

如上所述，正确的效果（引脚下降而未预先出现在地图上）会发生引脚掉落的第一次时间，但随后的下降会导致这种奇怪的行为。对于少量的引脚来说，这在很大程度上是难以察觉的，但是有很多引脚会使它更加分散注意力。

似乎标记的内部状态必须存在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

参见updated fiddle 我不确定它是否能解决您的问题，但隐藏/取消隐藏标记的另一种方法是将setVisible()标记称为marker.setVisible(boolean)。在这种情况下，投放动画仅适用于第一次，因为setVisible()未将标记与地图重新关联，因为它已经相关联。

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

1 个答案: