我正在使用Angular 4
,Google Maps v3
和Marker Clusterer v2
-因此,实质上是每个库的最新版本。我正在尝试遵循一个简单的示例(https://developers.google.com/maps/documentation/javascript/marker-clustering),该示例在官方Google Maps文档中找到,以使我的标记成簇且不成簇。
初始化 map ,这里没什么特别的:
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
文件。编辑: map 不会解散成较小的群集,只是不会解散成单独的针脚。
最佳答案
记录您的位置,您会看到您正在生成一个随机的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;
}