我正在使用Angular 4，Google Maps v3和Marker-Clusterer v2因此，基本上是每个库的最新版本。我正在尝试遵循一个简单的示例（https://developers.google.com/maps/documentation/javascript/marker-clustering），该示例可在Google Maps官方文档中找到，以使我的标记集群化和非集群化。
初始化地图，这里没什么特别的：
public ngOnInit(): void {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
this.generateMockPinResultsResponse(10000, map);
}
在init上调用此函数只会生成一堆示例引脚：
public generateMockPinResultsResponse(nMarkers, map): void {
let component = this;
var markers = [];
for (var i = 0; i<nMarkers; i++){
let latitude: number = this.getRandomUsLat();
let longitude: number = this.getRandomUsLng();
var marker = new google.maps.Marker({
position: { lat: latitude, lng: longitude },
map: map
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);//
}
据我所知，以上实际上是所有相关代码。我的标记会聚类，但不会解簇，我也不明白为什么。我的半工作代码在这里：PLUNK，代码片段来自app.ts文件。
编辑：地图不会解散成较小的群集，只是不会解散成单独的引脚。
记录您的位置，您会看到您正在生成一个随机的lng / lat到0个小数位，因此对于10,000个位置，您将有完全相同的位置。http://plnkr.co/edit/FWRdHXd2tJbOIRzrvBZj?p=preview
const positions = markers.map(marker => {
const position = marker.getPosition();
return {
lat: position.lat(),
lng: position.lng(),
})
console.log(positions);
更新您的生成器以使其更好（到4个小数位）随机位置，我们可以看到它已修复此http://plnkr.co/edit/vMkjrSYqeYoaN4lRRyHa?p=preview
public getRandomInRange (from, to, fixed) {
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
}
private getRandomUsLat(){
let max = 48;
let min = 30;
let num = this.getRandomInRange(min, max, 4);
return num;
}
private getRandomUsLng(){
let max = -70;
let min = -110;
let num = this.getRandomInRange(min, max, 4);
return num;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句