我正在创建一个带有 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 中的地图。
请帮忙