使用 angular2 在谷歌地图上处理大型数据集 (100000)

Question

我在我的angular2应用程序中使用谷歌地图。我也使用过MarkerCluster，如下所示。

for (let marker of this._markers) {
let lat = +marker.latitude;
let long = +marker.longitude;
let markerobj = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: marker.name,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 6,
fillOpacity: 0.8,
fillColor: '#5A7793',
strokeColor: '#FFFFFF',
strokeWeight: 2,
},
map: this.map,
visible: true,
});
this.markerLayer.push(markerobj);
latlngbounds.extend(markerOnMap.getPosition());
markerList.push(markerOnMap);
}
let markerCluster = new MarkerClusterer(this.map, markerList, { imagePath: '../assets/images' });

我想在谷歌地图上显示大约 100000 个标记。当我尝试绘制 100000 个标记时，我遇到了很多性能问题。

根据客户要求，我不能使用其他地图库。我需要坚持使用谷歌地图。

您有什么建议可以帮助我提高性能吗？

Answer 1

您不会一次绘制 100,000 个标记。您需要做的是减少一次显示的数据量。仅在放大时显示单个标记，以便视图中没有太多标记。

所以我的建议是根据谷歌地图的边界从服务器加载标记。所以这将是左上角和右下角的坐标。

因此，假设您有 100,000 个标记分布在世界各地。在世界观中，最好不要显示任何内容并要求用户放大。一旦您处于较低的缩放级别，请使用地图的边界从位于这些边界内的服务器获取标记。这应该会大大减少您必须显示的标记数量。我不知道您的数据覆盖范围，但您可以找出最适合您的缩放级别。