Marqueurs Google Map pas sur "Un-Clustering"

Question

J'utilise Angular 4, Google Maps v3, et Marker Clusterer v2 - donc, essentiellement les dernières versions de chaque bibliothèque respective. J'essaie de suivre un exemple simple (https://developers.google.com/maps/documentation/javascript/marker-clustering) trouvé dans le doc officiel de Google Maps pour faire de mes marqueurs un cluster et un non-cluster.

Init la carte, rien de spécial ici:

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

Cette fonction a appelé initialisation génère juste un groupe de broches d'échantillons:

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

Ce qui précède est vraiment tout le code pertinent dans la mesure Je connais. Mes marqueurs se regroupent mais ne décollent pas, et je ne comprends pas pourquoi. Mon code de semi-travail est ici: PLUNK, les extraits de code proviennent du fichier app.ts. Editer: La carte ne se regroupe pas en plus petits groupes, elle ne se désagrège pas en broches individuelles.

Answer 1

En enregistrant vos emplacements, vous pouvez voir que vous générez un lng/lat aléatoire à 0 décimales, donc avec 10 000 emplacements, vous aurez des emplacements dupliqués exacts. 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); 

Mise à jour du générateur pour mieux nous pouvons (à 4 décimales) des endroits aléatoires voir qu'il corrige ce 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; 
    } 

Answer 2

Ce n'est pas un problème d'Angular. Puisque vous avez la fonction générée aléatoirement pour lat et long. D'une certaine façon, il y aura plus de deux marqueurs très proches de l'autre. Ensuite, la bibliothèque google map n'est pas en mesure de faire la distinction entre ceux-ci.

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

Il a été rapporté sur Github aussi bien. Voir mon plunker avec seulement 1000 articles et nous pouvons réussir à voir certains des marqueurs, mais le problème persiste toujours. Les gens suggèrent de changer le zoom maximum de l'objet carte. Mais il va depend on the map type. Vous pouvez également voir le niveau de zoom sur la console de mon plunker. Le maximum qu'il peut atteindre est 22 même si j'essaie de pirater avec 48.

Si vos données réelles peuvent supporter le regroupement des marqueurs très proches, vous pouvez jeter un oeil à Leaflet.

Citation du problème.

Cette question, ainsi que beaucoup d'autres limitations dans l'API Google Maps nécessitant des solutions de contournement forcé notre entreprise loin de Google Maps. Nous sommes maintenant en utilisant Leaflet et Mapbox avec un grand succès.

Answer 3

L'exemple suivant de Google pourrait vous aider en particulier la fonction supprimer les clusters: https://github.com/googlemaps/js-marker-clusterer