如何在 AGM-MAP(Angular 6+)上使用集群

问题描述 投票:0回答:0

我正在创建一个带有 AGM MAP 的视图,我想在其中添加一些标记和集群加入它们。

我有以下代码:

-HTML-
    <agm-map
        class="agm-map"
        [scrollwheel]="null"
        (idle)="updateMapCenter()"
        (mapReady)="getMapInstance($event)"
        [latitude]="latCentro"
        [longitude]="lonCentro"
        [zoom]="zoom"
        (boundsChange)="checkMarkersInBounds($event)"
    >
        <agm-marker-cluster
            [imagePath]="'https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/images/m1.png?raw=true'"
            [styles]="mapOptions.styles"
            [calculator]="mapOptions.calculator"
            style="background-repeat: no-repeat"
            [maxZoom]="15"
            [minimumClusterSize]="2"
        >
            
            <agm-marker
                *ngFor="
                    let m of Locations
                "
                [markerClickable]="!isDisabled(m)"
                (markerClick)="selectMupi1(m.index)"
                [latitude]="m.lat"
                [longitude]="m.lon"
                [iconUrl]="{
                    url: m.selected
                        ? '../../../assets/img/icons/soportes/' + m.description + '_orange.png'
                        : '../../../assets/img/icons/soportes/' + m.description + '_blue.png',
                    scaledSize: { height: 50, width: 50 }
                }"
            ></agm-marker>
            
        </agm-marker-cluster>
    </agm-map>

    -TS-

SOME IMPORTS
...

Variables declarations
...

    mapOptions = {
        styles: [
            {
                height: 47,
                url: '../../../assets/img/icons/clusters/m7.png',
                width: 47,
                'line-height': 48,
                color: 'white',
                'font-size': 18
            },
            {
                height: 47,
                url: '../../../assets/img/icons/clusters/m8.png',
                width: 47,
                className: 'clusters',
                textColor: 'white',
                textSize: 14
            },
            {
                height: 59,
                url: '../../../assets/img/icons/clusters/m10.png',
                width: 60,
                'line-height': 60
            }
        ],
        calculator: (markers) => {
            let cont = 0;
            for (let i = 0; i < markers.length; i++) {
                cont = cont + 1;
            }
            if (cont < 5) {
                return { text: markers.length, index: 2 };
            } else if (cont < 12) {
                return { text: markers.length, index: 2 };
            }
            return { text: markers.length, index: 2 };
        },
        labelOptions: {
            color: 'white',
            fontFamily: '',
            fontSize: '14px',
            fontWeight: 'bold',
            text: 'Some Text'
        }
    };

ngOnInit() {}
....


    getMapInstance(map) {
        this.map = map;
    }


现在我必须更新集群。我想强制更新它们,并且我想知道每次缩放时它们在哪里及其大小。我的意思是,我想预先计算集群及其大小,以避免每次打开地图时都进行多次计算。我将拥有 10.000 多个标记,我希望能够获得集群的实例,知道它们在哪里......基本上,我如何能够按照我定义的那样从 TS 中获取标记和集群的实例正如我所展示的那样,html 中的地图。

请帮忙

angular dictionary google-maps-markers markerclusterer agm-map
© www.soinside.com 2019 - 2024. All rights reserved.