填充超过 5 万个标记时，Google 地图未加载或卡住

Posted 2023-03-13

【中文标题】填充超过 5 万个标记时，Google 地图未加载或卡住

【英文标题】：Google map is not loading or stuck when populating more than 50k markers

【发布时间】：2019-09-10 06:32:36

【问题描述】：

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

使用 Angular 5，打字稿，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_namemarker.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
        ...

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

【参考方案1】：

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

var centerCoordinate = googleMaps.getCenter();

Calculate distance between 2 GPS coordinates

【参考方案2】：

您可以使用地图的 agm 边界。 所以你需要创建两个标记数组：

标记， 显示标记。

显示的标记是地图边界内的所有标记。 每次地图边界发生变化时，都会通过过滤标记数组重新计算显示的标记数组，以仅保留地图边界内的标记。

这是一个小例子：

<agm-map (boundsChange)="updateMarkers($event)">
 <agm-marker *ngFor="let marker of displayedMarkers" [latitude]="marker.latitude" [longitude]="marker.longitude" />
</agm-map>

markers: LatLngLiteral[];
displayedMarkers: LatLngLiteral[];

updateMarkers(newBounds: LatLngBounds) 
  this.displayedMarkers = this.markers.filter(marker => newBounds.contains(marker));

就我而言，我已经覆盖了 contains 方法。

From: contains(latLng: LatLng): boolean;
To: contains(latLng: LatLngLiteral): boolean;

Than: updateMarkers(newBounds: LatLngBounds)  this.displayedMarkers = this.markers.filter(marker =>newBounds.contains(marker.latLng)); 
Where: interface marker  latLng: LatLngLiteral; lat: number; lng: number; label?: ; icon?: ; controllerInfo?: ; controllerStaus?: ; 

如果您有任何问题欢迎提出。

【讨论】：

您在哪个文件中覆盖了方法？