6

我使用的是Angular 4,Google Maps v3和標記Clusterer v2 - 所以,基本上是每個相應庫的最新版本。我正在嘗試使用官方Google地圖文檔中的一個簡單示例(https://developers.google.com/maps/documentation/javascript/marker-clustering)來製作標記羣集和取消羣集。谷歌地圖標記不在「非羣集」

初始化的地圖,這裏沒有什麼特別的:

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);// 
    } 

上面真的是所有相關的代碼儘可能我知道。我的標記做集羣,但不要uncluster,我不明白爲什麼。我的半工作代碼位於:PLUNK,代碼片段來自app.ts文件。

編輯:地圖將非集羣化成更小的集羣,它只是不會將其集羣到單個引腳中。

+1

你是否試圖用正確的集羣標記圖像做到這一點?我在考慮可能會有一個問題,它試圖加載羣集標記圖像,但由於缺少文件而崩潰。 –

+0

我會嘗試/帖子長度 – VSO

回答

3

記錄你的位置,你可以看到你正在生成一個隨機的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; 
    } 
3

這不是Angular的問題。既然你有隨機生成的經緯函數。不知何故,它會有兩個以上的標記與另一個非常接近。然後谷歌地圖庫無法區分這些。

https://embed.plnkr.co/Ww4N71vKe6IUZjHFPLKo/

據報道Github爲好。只看到我的運動員只有1000件物品,我們可以設法看到一些標記,但問題仍然存在。人們建議改變地圖對象的最大縮放比例。但它會depend on the map type.您還可以看到我的plunker控制檯上的縮放級別。它可以進入的最大值是22,即使我試圖用48來破解。

如果您的真實數據nead支持非常接近標記的聚類,您可能需要查看Leaflet。

引用此問題。

此問題以及Google Maps API 需要解決方法中的許多其他限制迫使我們的業務遠離Google地圖。我們現在使用Leaflet和Mapbox的 獲得巨大成功。

+1

很酷,我很欣賞答案。獎賞將接近到期。 – VSO

+0

@VSO要查看羣集的工作,您還應該使用markercluster [options](https://googlemaps.github.io/js-marker-clusterer/docs/reference.html),例如'{gridSize:50 ,maxZoom:15}'。 – RWAM

+0

@RWAM只需嘗試maxZoom:15,並且可以設法在點擊羣集時看到一個標記。我真的不知道,謝謝指出 - > VSO:請檢查並看看是否符合您的期望。我可以看到標記,但只有一個。 – trungk18