3

AngularJS アプリで Leaflet を Marker Cluster プラグインと一緒に使用しています。

マップのアイテムを選択するときは、それを強調表示する必要があります。divIcons を使用しているため、クラスを追加または削除し、アイテムがマーカーでない場合は色も設定します。

そのために、最後にクリックしたアイテムをメモリに保存して、次のアイテムが選択されたときに、前のアイテムの強調表示を解除して現在のアイテムを強調表示できるようにします。

        // De-highlight previous item
        if (lastClickedLayer) {
            if (lastClickedLayer instanceof L.Marker) {
                lastClickedLayer._icon.classList.remove('marker-highlighted');
            }
            else {
                lastClickedLayer.setStyle({
                    color: (lastClickedLayer.feature.status === 'active') ? '#43A7E0' : '#EB7938'
                });
            }
        }

        // Highlight item on the map
        lastClickedLayer = e.layer;

        if (e.layer instanceof L.Marker) {
            e.layer._icon.classList.add('marker-highlighted');
        }
        else {
            e.layer.setStyle({
                color: '#32C9AC'
            });
        }

マーカー クラスタリングがなければ、すべて問題ありません。ズームアウトして現在のマーカーのクラスターを取得し (最初に 1 つのマーカーを選択するとします)、そのクラスターにズームインすると、選択したマーカーに「マーカーで強調表示された」クラスが割り当てられません。

また、ズームインの最後にいて、クラスターがマーカーのクモの巣 (またはそれらの呼び出し方法) を表示している場合、マーカーが選択されているクラスターが閉じられている場合、クラスを設定解除できないようです。そのレイヤーの-それは未定義になります。

どうすれば問題を解決できますか?

ああ、私のマップ アイテムは新しい L.MarkerClusterGroup() として保持されます。

4

1 に答える 1