javascript - Google Maps JS API V3 多标记渲染

Question

我遇到了在谷歌地图上加载 2000 个标记的性能问题。这个问题是概述可以在很多地方找到，但仍然无法为我找出问题所在。

因此，问题简而言之:google map 初始化使浏览器挂起 10-20 秒。

设置:

• 来自后端的标记数据在单个获取请求中收到。在 0.3 秒内加载
• 使用标记聚类器 (https://googlemaps.github.io/js-marker-clusterer/docs/examples.html) 库。 然而，有或没有它浏览器仍然在同一时间挂起。
• 标记丰富。带有自定义图片、信息窗口和事件。
• InfoWindows 正在设置为 AngularJS 指令

标记设置代码:

function showMarkers(scope,data) {
    var locations = data;
    console.log("Starting markers setup: ", new Date());
    for(var i = 0; i < locations.length; i++) {

        var MarkerImage = '/img/reasestate.png';
        markers[i] = new google.maps.Marker({
            position: {lat:locations[i].latitude, lng:locations[i].longtitude},
            map: map,
            id: locations[i].id,
            icon: MarkerImage
        });


        var infowindow = new google.maps.InfoWindow();
        var contentString = '<infowindow></infowindow>';
        var compiled = $compile(contentString)(scope);

        google.maps.event.addListener(markers[i], 'click', (function(i, scope) {
            return function(){
                scope.placeInfo = null;

                //for search around
                scope.condo_LatLng = new google.maps.LatLng(locations[i].latitude,locations[i].longtitude);

                //update scope
                scope.$apply();

                //////////////////
                ///INFOWINDOW SETUP
                ///////////////////
                //you can change url to your url . '/maps/api/getcondo?CondoID='+scope.place.id'
                $http.get('/maps/api/condo/items?CondoID='+locations[i].id).then(function(success) {
                    //a bit of additional received data processing, not important.
                }, function(error) {
                }).finally(function() {})
            };
        })(i, scope, locations[i]));
    }
    setClustering(markers);
    console.log("Finished markers setup: ", new Date());

    /////////////
    ///context menu
    ////////////
    var menuStyle = {
        menu: 'context_menu'
        //menuSeparator: 'context_menu_separator',
        //menuItem: 'context_menu_item'
    };

    var contextMenuOptions  = {
        classNames: menuStyle,
        menuItems: [
            { label:'Add your condo...', id:'menu_option1',
                className: 'menu_item', eventName:'option1_clicked' },
            { label:'Exit', id:'menu_option2',
                className: 'menu_item', eventName:'option2_clicked' }
        ],
        pixelOffset: new google.maps.Point(10, -5),
        zIndex: 5
    };

    var contextMenu = new ContextMenu(map, contextMenuOptions);
    google.maps.event.addListener(contextMenu, 'menu_item_selected',
        function(latLng, eventName, source){
            switch(eventName){
                case 'option1_clicked':
                    createDraggableMarker(latLng);
                    break;
                case 'option2_clicked':
                    // do something else
                    break;
                default: break;
            }
        });

    google.maps.event.addListener(map, 'rightclick', function(mouseEvent) {
        contextMenu.show(mouseEvent.latLng, map);
    });
}

function setClustering(markers){
    var mcOptions = {gridSize: 150};
    mc = new MarkerClusterer(map,markers, mcOptions);
}

在 console.out 上获取这个:

Starting markers setup:  Sun Jun 19 2016 16:43:57 
jsAllMain.js:240 Finished markers setup:  Sun Jun 19 2016 16:43:57
jsAllMain.js:256 Show markers method done at:  Sun Jun 19 2016 16:43:57
jsAllMain.js:256 Initialize searchmap done at:  Sun Jun 19 2016 16:43:57

但是在我在 console.out 中得到这个之后，浏览器会再挂起 10-20 秒，直到它显示带有标记的 map 。

更新:问题出在 AngularJS 绑定(bind)处理(信息窗口指令)上。知道如何处理它吗？

Answer 1

我还没有使用 Angular，所以我无法帮助您。但作为一般规则，我建议您花一些时间在服务器端进行集群，然后不惜一切代价避免加载您提到的所有丰富环境，尽可能利用它们，仅在用户请求时可用。它需要做一些工作，但如果您的应用程序计划增加其标记数量，我们将不胜感激。对于聚类算法，我找到了这个 StackOverflow 引用资料，希望它能对你有所帮助。
Server-side clustering for google maps api v3