6

私はAngular 4,Google Maps v3、およびマーカーClusterer v2を使用しています。つまり、基本的にそれぞれのライブラリの最新バージョンです。私は、マーカをクラスタ化してクラスタ化しないように、公式のGoogleマップのドキュメントにある簡単な例(https://developers.google.com/maps/documentation/javascript/marker-clustering)に従っています。"Un-Clustering"にないGoogleマップマーカー

マップのInit、ここで何も特別:初期化で呼び出さ

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

この関数は、単にサンプルピンの束を生成します。

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ファイルです。

編集:マップは、より小さいクラスターにクラスタ化されず、個々のピンにクラスタ化されません。

+1

適切なクラスタマーカーイメージでこれを実行しようとしましたか?私はそれがクラスタマーカー画像をロードしようとするが、ファイルが見つからないためにクラッシュする問題があるかもしれないと考えている。 –

+0

私はそれを試します/ポストの長さ – VSO

答えて

3

場所を記録すると、ランダムなlng/latを小数点以下0桁まで生成していることがわかります。そのため、10,000個の場所では正確な重複した場所があります。 http://plnkr.co/edit/FWRdHXd2tJbOIRzrvBZj?p=preview(小数点以下4桁まで)我々はそれが特にクラスタ化を解除機能をあなたを助けるかもしれないGoogleからの次の例は、この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

角度の問題ではありません。あなたは緯度と経度のためにランダムに生成された関数を持っているからです。どういうわけか、2つ以上のマーカーが別のマーカーに非常に近くなるでしょう。その後、Googleマップライブラリはそれらを区別することができません。

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

それは同様にGithubに報告されました。 1000アイテムしかない私のプランカーを見て、私たちはいくつかのマーカーを見ることができますが、問題は依然として続きます。人々はマップオブジェクトの最大ズームを変更することを推奨します。しかし、それはdepend on the map type.私のプランカーのコンソールでズームレベルを見ることもできます。私が48でハックしようとしても最大値は22です。

非常に近いマーカーのクラスタリングをサポートするために実際のデータを使用している場合は、リーフレットを参照してください。

問題から引用します。

Googleマップから離れて私たちのビジネスを強制的に回避策を必要とするGoogle MapsのAPI の他の多くの制限と一緒にこの問題、。私たちは 今リーフレットとマップボックスを大成功に使っています。

+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を試してみて、クラスタをクリックすると1つのマーカーを見ることができます。私は実際にそれについて知りませんでした。 - > VSO:あなたの期待に合っているか確認してください。私はマーカーを見ることができますが、マーカーは1つだけです。 – trungk18

0

を固定していることがわかりますランダムな位置をより良くするためにあなたのジェネレータを更新

const positions = markers.map(marker => { 
    const position = marker.getPosition(); 

    return { 
    lat: position.lat(), 
    lng: position.lng(), 
}) 

console.log(positions); 

https://github.com/googlemaps/js-marker-clusterer

関連する問題