Question

我正在使用超过50k的坐标填充角形Google地图，并且还使用标记簇，将10至15k的地图放慢一点，但是正在加载。我可以缩放或单击群集以查看特定的标记信息。如果大于或等于50k，则根本不会加载整个浏览器标签。请提出任何可以更快加载10万个或更多标记的解决方案，或者提供除Google地图以外的其他任何地图。

使用角度5，打字稿，JSON响应包括所有坐标和信息（对于5万个对象，大约为16-20mb），以及在ubuntu服务器中运行的google地图。

//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
        }...
}

我希望Google地图加载速度更快，但目前未加载或卡死。

Answer 1

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

var centerCoordinate = googleMaps.getCenter();

Calculate distance between 2 GPS coordinates

Answer 2

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

标记，显示的标记。

显示的标记是在地图范围内的所有标记。每次地图范围更改时，都会通过过滤markers数组重新计算显示的标记数组，只保留地图范围内的那些。

这是一个小例子：

<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?: {}; }

如果您有任何疑问，欢迎提问。

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

2 个答案: