Question

我正试图在 Google地图中添加很多标记。我已经将数据传递到服务器以在“繁忙”区域建立群集，以帮助减少标记的数量。

这是我的代码：

        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'});

这是非常快速和高效的，允许添加数千个标记而不会对性能造成太大影响。

在Google Maps v3 Javascript上添加多个标记的更快方法

1 个答案: