标记和集群的问题

Question

根据json数据，我需要用标记填充地图。 如果制造商距离太近，他们会分成一个集群。 我将这些扩展用于标记和群集：（https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries）

我编写了以下代码来完成我需要的代码，除了一些问题：

1 - 它看起来像是堆叠标记和簇。如果我使用chrome检查器并删除一个群集或标记，那么另一个就在下面。当我放大或拖动地图时，它似乎堆叠得更多。

2 - 缩小时，某些标记仍会显示在群集外部，并且群集中显示的数字已经在计算中。这似乎与前面提到的堆叠有关。

这是我的代码的主要部分：

function initialize(lat, lng) {
    window.lat = lat;
    window.lng =lng;
   var myLatlng = new google.maps.LatLng(lat,lng);
   var mapOptions = {
      mapTypeControl: false,
      center: myLatlng,
      zoom: 13,
      maxZoom:18,
      zoomControl: true,
      mapTypeControl: true
   };

    map = new google.maps.Map(document.getElementById('map-full'), mapOptions);
    google.maps.event.addListener(map, 'idle', function() {
        $mapBounds = map.getBounds();
        getJSONData($mapBounds);
    });

}

google.maps.event.addDomListener(window, 'load', initialize(<?=$location;?>));

function getJSONData(map_bounds){
    var bounds  = {
        'swlat':map_bounds.getSouthWest().lat(),
        'swlng':map_bounds.getSouthWest().lng(),
        'nelat':map_bounds.getNorthEast().lat(),
        'nelng':map_bounds.getNorthEast().lng()
    };

    data = {
        'bounds': bounds,
    }

 $.ajax({
    type: "POST",
    dataType: 'json',
    url: "<?=$data_URL;?>",
    data: data,
    success: function (json) {
        populateMap(json, bounds);
    }
    });
}    

function populateMap(data, bounds){

//// ADD Markers
    var markerCluster = null;
    var markers = [];
    var infowindow = new google.maps.InfoWindow();

    leftList(data); // adds properties to left list
    for (var i = 0; i < data.length; i++) {


        var latLng = new google.maps.LatLng(data[i].lat, data[i].lng);  
        // drop the marker
        var marker = new MarkerWithLabel({
            position: latLng,
            map: map,
            labelContent: data[i].price,
            labelAnchor: new google.maps.Point(27, 35),
            title: data[i].title,
            labelClass: "map-markers",
            infoData: data[i],
            zIndex: i

        });

        google.maps.event.addListener(map, 'dragstart', function() {
            infowindow.close();
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.close();
            var info_content = makeMarkerInfo(this.infoData, this.index);
            infowindow.setContent(info_content);
            infowindow.open(map,this);

        });

        markers.push(marker);

    }

///// ADD CLUSTERS
    var clusterOptions = {
        zoomOnClick: false
    }

    markerCluster = new MarkerClusterer(map, markers, clusterOptions);

    // Zoom in or show infowindow when click on Cluster
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
        if (map.getZoom() < map.maxZoom ){        
            map.setCenter(cluster.center_);
            map.setZoom(map.getZoom() + 4);
        } else {

            var content = '';
            // Convert lat/long from cluster object to a usable MVCObject
            var info = new google.maps.MVCObject;
            info.set('position', cluster.center_);
            //Get markers
            var marks_in_cluster = cluster.getMarkers();

            console.log(marks_in_cluster);

            for (var z = 0; z < marks_in_cluster.length; z++) {
                content = makeClusterInfo(marks_in_cluster,z) ;
            }
            infowindow.close();
            infowindow.setContent(content); 
            infowindow.open(map, info);
            google.maps.event.addListener(map, 'zoom_changed', function() {
                infowindow.close()
            });
        } 
    });

}

Answer 1

我相信每次地图触发空闲时（在平移或缩放后地图变为空闲时会触发此事件。请参阅文档here），您只需复制标记即可。在地图上添加新标记之前，您应该通过循环标记数组并将地图设置为NULL来清除这些标记。

var i = 0;
var total = markers.length;
for (; i<total; i++) {
 markers[i].setMap(null);
}

然后你重新做一切。 Clusterer在这一点上发生了变化。因此，在函数中调用clusterer，并在每次标记数组更改时调用它。这应该做到！

希望有所帮助

编辑：这里有一点代码重写。这不是最佳选择，但请仔细研究并尝试弄清楚我做了什么以及为什么。添加了一些注释来解释。这没有被测试

这是：

// I guess you have this at some point in your code
var map;

/**
 * Init function
 * @param  {float} lat Latitude
 * @param  {float} lng Longitude
 */
function initialize(lat, lng) {
    window.lat = lat;
    window.lng =lng;
    var myLatlng = new google.maps.LatLng(lat,lng);
    var mapOptions = {
      mapTypeControl: false,
      center: myLatlng,
      zoom: 13,
      maxZoom:18,
      zoomControl: true,
      mapTypeControl: true
    };

    map = new google.maps.Map(document.getElementById('map-full'), mapOptions);
    google.maps.event.addListener(map, 'idle', function() {
        $mapBounds = map.getBounds();
        getJSONData($mapBounds);
    });
}

google.maps.event.addDomListener(window, 'load', initialize(<?=$location;?>));

/**
 * Gets the json data for the map
 * @param  {array} map_bounds Boundaries of the google map after idle
 */
function getJSONData(map_bounds){
    var bounds  = {
        'swlat':map_bounds.getSouthWest().lat(),
        'swlng':map_bounds.getSouthWest().lng(),
        'nelat':map_bounds.getNorthEast().lat(),
        'nelng':map_bounds.getNorthEast().lng()
    };

    data = {
        'bounds': bounds,
    }

    $.ajax({
        type: "POST",
        dataType: 'json',
        url: "<?=$data_URL;?>",
        data: data,
        success: function (json) {
            populateMap(json, bounds);
        }
    });
}

// Keep track of the markers and clusterer
var markers;
var markerCluster;

/**
 * Create the map with the datas
 * @param  {json} data    Map data
 * @param  {array} bounds Map boundaries
 */
function populateMap(data, bounds){

    // Assume you can clear markers and clusterer
    // If they exist at this point
    if (markers.length) {
        var i = 0;
        var total = markers.length;
        for (; i<total; i++) {
            // Remove click listeners
            google.maps.event.clearListeners(markers[i], 'click');
            markers[i].setMap(null);
        }
    }

    // Start over
    markers = [];

    if (markerCluster) {
        // Remove click listeners
        google.maps.event.clearListeners(markerCluster, 'clusterclick');
        markerCluster.setMap(null);
    }

    // Start over
    markerCluster = null;

    // @NOTE
    // THE REST IS UNCHECK FROM HERE
    var infowindow = new google.maps.InfoWindow();

    leftList(data); // adds properties to left list
    for (var i = 0; i < data.length; i++) {


        var latLng = new google.maps.LatLng(data[i].lat, data[i].lng);  
        // drop the marker
        var marker = new MarkerWithLabel({
            position: latLng,
            map: map,
            labelContent: data[i].price,
            labelAnchor: new google.maps.Point(27, 35),
            title: data[i].title,
            labelClass: "map-markers",
            infoData: data[i],
            zIndex: i

        });

        google.maps.event.addListener(map, 'dragstart', function() {
            infowindow.close();
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.close();
            var info_content = makeMarkerInfo(this.infoData, this.index);
            infowindow.setContent(info_content);
            infowindow.open(map,this);

        });

        markers.push(marker);

    }

    ///// ADD CLUSTERS
    var clusterOptions = {
        zoomOnClick: false
    }

    markerCluster = new MarkerClusterer(map, markers, clusterOptions);

    // Zoom in or show infowindow when click on Cluster
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
        if (map.getZoom() < map.maxZoom ){
            map.setCenter(cluster.center_);
            map.setZoom(map.getZoom() + 4);
        } else {

            var content = '';
            // Convert lat/long from cluster object to a usable MVCObject
            var info = new google.maps.MVCObject;
            info.set('position', cluster.center_);
            //Get markers
            var marks_in_cluster = cluster.getMarkers();

            console.log(marks_in_cluster);

            for (var z = 0; z < marks_in_cluster.length; z++) {
                content = makeClusterInfo(marks_in_cluster,z) ;
            }
            infowindow.close();
            infowindow.setContent(content);
            infowindow.open(map, info);
            google.maps.event.addListener(map, 'zoom_changed', function() {
                infowindow.close()
            });
        }
    });

}