在填充超过50k标记时，Google地图未加载或卡住

Question

我正在使用超过50k的坐标填充角度谷歌地图，并且还使用标记群集，10到15k的地图有点慢，但它正在加载。我可以缩放或单击群集以查看特定的标记信息。在50k或更多的情况下，它根本没有加载整个浏览器选项卡被卡住。请建议更快地加载100k或更多标记的任何解决方案或google-maps以外的任何地图。

使用angular 5，typescript，JSON响应包括所有坐标和信息（对于50k对象大约为16-20mb），在ubuntu服务器中运行的谷歌地图。

//index.component.html
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [fitBounds]=100>
    <agm-marker-cluster [imagePath]="'https://googlemaps.github.io/js-marker-clusterer/images/m'">
        <agm-marker *ngFor="let marker of analytics_data;"
                    [latitude]="marker.latitude" 
                    [longitude]="marker.longitude"
                    [label]="marker.first_name"
                    [iconUrl]="marker.icon_url">

            <agm-info-window>
                <strong>Name:{{marker.first_name}}{{marker.last_name}}</strong><br>
                <strong>Mobile:{{marker.gender}}</strong><br>
            </agm-info-window>
        </agm-marker>
    </agm-marker-cluster>
</agm-map>

//index.component.ts
    public getAnalytics() {
        this._dataService.get(url).subscribe(data => {
            this.analytics_data = data["data"];
        });
    }

{
    "status": 200,
    "success": true,
    "data": [
        {
            "id": 1,
            "first_name": "Sachin",
            "last_name": "kumar",
            "gender": "male"
            "latitude": 26.8346004,
            "longitude": 80.9212544
        },
        {
            "id": 2,
            "first_name": "satya",
            "last_name": "kumar",
            "gender": "male",
            "latitude": 26.8009544,
            "longitude": 80.8946128
        }...
}

我希望谷歌地图应该加载更快，但目前它没有加载或卡住。

Answer 1

当您在Google地图中加载大量对象时，它在某些低性能计算机或移动设备中很重要。我想你需要对算法进行一些优化。只在您的视觉中显示标记。您可以通过计算标记与地图中心坐标之间的距离来实现。

var centerCoordinate = googleMaps.getCenter();

Calculate distance between 2 GPS coordinates