javascript - 多个标记使浏览器崩溃

Question

我正在 Google map 上加载大约 15,000 个标记。

我使用每秒时间间隔检索了 1000 个标记。

当它完成并且 map 上加载了 15000 个标记时，浏览器就会崩溃。

那么，我必须为这个问题做什么。

请不要投反对票。

 for (x in dataObject) {
        var infowindow = new google.maps.InfoWindow();
        var markerPosition = new google.maps.LatLng(dataObject[x].Latitude, dataObject[x].Longitude);
        var scaleSize = getSectorSize(dataObject[x].Mapinfo_Sector_Size);
        var sectorColor = getSectorColor(dataObject[x].Radios);
        var pathValue = createPie(dataObject[x].MapInfo_Beamwidth);

        marker = new google.maps.Marker({
            position: markerPosition,
            map: map,
            icon: {
                path: pathValue,
                fillColor: sectorColor,
                fillOpacity: 1,
                strokeColor: '',
                strokeWeight: 0,
                //scale: 0.8,
                scale: dataObject[x].Mapinfo_Sector_Size + 0.04,
                anchor: new google.maps.Point(0, 0),
                rotation: 250 + dataObject[x].Azimuth,
                //rotation: 250,
            },
        });

Answer 1

我自己正在开发一个 Google map 项目，当标记数量增加甚至超过 500 时，我就发现了性能问题。

谷歌地图文档本身提供了一些有效的workarounds ，其中我用过 MarkerClusterer v3这提供了一种管理大量标记的好方法。 但是，使用 MarkerClusterer 不会改善您的性能问题。

如果您仍然希望在单个视口(viewport)中向用户显示 15000 个标记(从用户体验的 Angular 来看，这本身听起来并不正确)，那么您可以看看向叠加层添加标记，此博客

How To Quickly Add Many Markers Without Killing The Map

提供了在 map 上方添加重叠 (div) 并向 div 添加标记的完善解决方案。该博客还提供了加载 1000 个标记的示例。我不确定这是否适用于 15000:)

希望这有帮助。