Более быстрый способ добавить несколько маркеров в Google Maps v3 Javascript

Question

Я пытаюсь добавить много маркеров в Google Map .Я уже передаю данные на сервер, чтобы создать кластеры в «занятых» областях, чтобы уменьшить количество маркеров.

Вот мой код:

        markers.forEach(function(item, i){

            if (item.count) {

                // this is a cluster one, so add the respective icon along with the number as a label

                // check we have a value for this. If we don't it means that someone has 2 markers with the exact same lat/lng, so lets ignore it!
                if (item.coordinate) {

                    var location = new google.maps.LatLng(item.coordinate[0], item.coordinate[1]); // lat,lng of cluster

                    var cluster_icon;
                    if (item.count < 10) {
                        cluster_icon = icon_markers_1;
                    } else if (item.count < 30) {
                        cluster_icon = icon_markers_2; //
                    } else if (item.count < 50) {
                        cluster_icon = icon_markers_3; //
                    } else if (item.count < 100) {
                        cluster_icon = icon_markers_4; //
                    } else {
                        cluster_icon = icon_markers_5; //
                    }


                    window.VARS.markers[i] = new google.maps.Marker({
                              position: location,
                              //label: String(item.count),
                              title: "lat:"+item.coordinate[0]+ ",lng: " + item.coordinate[1],
                              label: {
                                text: String(item.count),
                                color: "#fff",
                                fontSize: "16px",
                                fontWeight: "bold"
                              },
                              map: window.VARS.Google_Map_Modal,
                              icon: cluster_icon
                    });

                    window.VARS.markers[i].addListener('click', function() {
                        //console.dir(window.VARS.markers[i].getPosition().lat());
                        var zoom = window.VARS.Google_Map_Modal.getZoom();
                        zoom++;
                        if (zoom <= 20) {
                            window.VARS.Google_Map_Modal.setZoom(zoom++)
                        }

                        window.VARS.Google_Map_Modal.setCenter(this.getPosition());
                    });
                }

            } else {


                var link = window.VARS.links_stored[item.link_id];

                // this is an actual marker (not cluster), so lets add it to the map
                var location = new google.maps.LatLng(link.latitude, link.longitude); // lat,lng of cluster

                var dataPhoto = link.image_small;
                var marker = new google.maps.Marker({
                    position: location,
                    title: link.title,
                    the_row: i,
                    linkid: link.linkid,
                    map: window.VARS.Google_Map_Modal
                });

                window.VARS.markers.push(marker);
                window.VARS.marker_vals.push(item);
                //bounds.extend(latLng);

                marker.addListener('click', function() {
                    // do some stuff
                });



            }
        });

Есть ли лучший способ сделать это, чем один за другим?Я читал, что вы можете «добавить пакет» на карту - но я не могу найти какую-либо документацию, подтверждающую это.

Answer 1

Вместо того, чтобы заново изобретать колесо путем реализации собственной логики кластеризации, вы можете использовать ту, которая предоставлена ​​Google Maps.

https://developers.google.com/maps/documentation/javascript/marker-clustering

Добавление маркеров один за другим делает картуневероятно медленныйMarkerClusterer избегает этой проблемы, создавая массив маркеров, но не добавляя их на карту.

Маркеры добавляются вместе в конце, когда вы инициализируете MarkerClusterer, передавая массив маркеров.

var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 

Это очень быстро и эффективно, позволяя добавлять тысячи маркеров без особых затрат.хит производительности.