Google Map Markers không bật "Un-Clustering"

Question

Tôi đang sử dụng Angular 4, Google Maps v3 và Marker Clusterer v2 - về cơ bản, phiên bản mới nhất của từng thư viện tương ứng. Tôi đang cố gắng làm theo một ví dụ đơn giản (https://developers.google.com/maps/documentation/javascript/marker-clustering) được tìm thấy trong tài liệu chính thức của Google Maps để làm cho các điểm đánh dấu của tôi là cụm và bỏ cụm.

Init bản đồ, không có gì đặc biệt ở đây:

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

Chức năng này kêu gọi init chỉ tạo ra một loạt các chân mẫu:

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

Trên đây thực sự là tất cả các mã có liên quan như xa như Tôi biết. Đánh dấu của tôi làm cụm nhưng KHÔNG hủy bỏ, và tôi không hiểu tại sao. Mã bán làm việc của tôi là ở đây: PLUNK, đoạn mã từ tệp app.ts.

Chỉnh sửa: Bản đồ không tách rời thành các cụm nhỏ hơn, nó không chỉ tách rời thành các ghim riêng lẻ.

Answer 1

Đăng nhập vị trí của bạn, bạn có thể thấy rằng bạn đang tạo một lng/lat ngẫu nhiên đến 0 chữ số thập phân, vì vậy với 10.000 vị trí, bạn sẽ có vị trí trùng lặp chính xác. 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); 

Đang cập nhật máy phát điện của bạn để làm cho tốt hơn (đến 4 chữ số thập phân) địa điểm ngẫu nhiên chúng ta có thể thấy rằng nó sửa lỗi này 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

Nó không phải là một vấn đề của góc. Vì bạn có hàm được tạo ngẫu nhiên cho lat và dài. Bằng cách nào đó nó sẽ có nhiều hơn hai đánh dấu rất gần nhau. Sau đó, thư viện bản đồ google không thể phân biệt giữa các thư viện đó.

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

Nó đã được báo cáo trên Github là tốt. Xem plunker của tôi chỉ với 1000 mặt hàng và chúng tôi có thể quản lý để xem một số các dấu hiệu, nhưng vấn đề vẫn còn tồn tại. Mọi người đề xuất thay đổi độ phóng đại tối đa của đối tượng bản đồ. Nhưng nó sẽ depend on the map type. Bạn cũng có thể thấy mức thu phóng trên bàn điều khiển của người chia bài của tôi. Số lượng tối đa nó có thể nhận được là 22 thậm chí tôi cố gắng hack với 48.

Nếu dữ liệu thực của bạn hỗ trợ phân cụm các dấu mốc rất gần, bạn có thể muốn xem Leaflet.

Trích dẫn từ sự cố.

Vấn đề này, cùng với nhiều hạn chế khác trong API Google Maps yêu cầu cách giải quyết buộc doanh nghiệp của chúng tôi phải rời khỏi Google Maps. Chúng tôi đang hiện đang sử dụng Leaflet và Mapbox với thành công lớn.

Answer 3

Ví dụ sau đây từ google có thể giúp bạn đặc biệt là chức năng uncluster: https://github.com/googlemaps/js-marker-clusterer