Leaflet Spiderfier/MarkerCluster - 自动蜘蛛化动态标记答案

【问题标题】：Leaflet Spiderfier/MarkerCluster - Automatically spiderfy dynamic markersLeaflet Spiderfier/MarkerCluster - 自动蜘蛛化动态标记
【发布时间】：2016-01-07 21:58:49
【问题描述】：

我正在构建一个使用 Leaflet 作为视口的棋盘游戏的在线版本。

我的来源：https://github.com/edenLOL/gotta-chug-em-all/tree/master

我想要实现的是一种蜘蛛化/散布标记的方法，这些标记彼此落在同一方格上，包括它们相互移动时。

我正在使用 https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet 来蜘蛛化标记，单击标记时似乎可以工作。

但是，我需要始终抓取这些标记，而不需要点击事件。所以我为蜘蛛侠对象（oms）设置了keepSpiderfied: true。

var options = {  //**spiderfier
   keepSpiderfied: true,
   nearbyDistance: 120
};
oms = new OverlappingMarkerSpiderfier(map, options); //**spiderfier

但这不起作用。我似乎无法在蜘蛛化状态下加载标记，它总是需要点击才能蜘蛛化它们。

对于上下文，标记是在用户看到地图之前的提示期间动态生成的。

('#playerIcons > table > tbody > tr > td').on('click', function(){
    pokemonSelected = $(this).attr('class');
    if ( !$(this).hasClass('pokemonSelected') ){
        playerArray[pokeCounter].pokemon = ''+ pokemonSelected +'';
        playerArray[pokeCounter].marker = L.marker([playerArray[pokeCounter].coords[0], playerArray[pokeCounter].coords[1]], {
                                                icon: window[pokemonSelected]
                                            }).addTo(map);
        oms.addMarker(playerArray[pokeCounter].marker)  //**spiderfier
        pokeCounter += 1;        
    } else {
        return false;
    };
});

我也尝试过使用 Leaflet/Leaflet.markercluster。这在一定程度上有效，并以定义的缩放级别蜘蛛化标记，但是标记不会移动，而是保持堆叠在一起。

我在这里遗漏了什么可能会导致这些问题？我不介意使用 Spiderfier 或 MarkerCluster，因为一旦任一问题得到解决，两者都应该能够提供我正在寻找的解决方案。

Spiderfier：标记需要自动蜘蛛化

MarkerCluster：当蜘蛛飞出集群时，标记不会物理移动

注意：如果您决定打开 index.html，请注意 Pokemon 主题曲将在页面加载时在后台自动播放（直到绘制地图），因此请检查您的音量 :)

【问题讨论】：

"请注意口袋妖怪主题曲会自动播放" 感谢您的通知 :-)，但它可能会更有帮助（对于其他人因此获得支持）提供MCVE。除了在您的问题中发布您的代码外，还可以考虑在在线编辑工具中重现您的问题，例如 Plunker 或 JSFiddle。

标签： leaflet

【解决方案1】：

我使用传单中的 fire('click') 解决了这样的问题。

scope.spiderMarker - 标记，我想 spidrefy。在你的情况下，我认为它的 playerArray[pokeCounter].marker

    try{
       scope.spiderMarker.fire('click')}
       catch (e) {
       console.log(e);
       };

【讨论】：