Javascript 标记和簇的问题

基于json数据，我需要用标记填充地图。 如果制造商距离太近，他们就会聚集在一起。 我将这些扩展用于标记和簇：（）

我编写了以下代码，实现了我需要的功能，除了一些问题：

1-它看起来像是在堆叠标记和簇。如果我使用chrome inspector删除一个簇或标记，下面还有一个。当我放大或拖动地图时，它似乎堆积得更多

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

}

功能初始化（lat、lng）{
window.lat=lat；
window.lng=lng；
var mylatng=new google.maps.LatLng（lat，lng）；
变量映射选项={
mapTypeControl:false，
中心：myLatlng，
缩放：13，
maxZoom:18，
动物控制：对，
mapTypeControl：true
};
map=new google.maps.map（document.getElementById（'map-full'），mapOptions）；
google.maps.event.addListener（映射'idle'，函数（）{
$mapBounds=map.getBounds（）；
getJSONData（$mapBounds）；
});
}
google.maps.event.addDomListener（窗口'load'，initialize（））；
函数getJSONData（映射边界）{
变量界限={
'swlat'：map_bounds.getSouthWest（）.lat（），
“swlng”：map_bounds.getSouthWest（）.lng（），
'nelat'：map_bounds.getNorthEast（）.lat（），
'nelng'：map_bounds.getNorthEast（）.lng（）
};
数据={
“界限”：界限，
}
$.ajax({
类型：“POST”，
数据类型：“json”，
url:“”，
数据：数据，
成功：函数（json）{
populateMap（json，bounds）；
}
});
}    
函数populateMap（数据、边界）{
////添加标记
var-markerCluster=null；
var标记=[]；
var infowindow=new google.maps.infowindow（）；
leftList（数据）；//将属性添加到左侧列表
对于（变量i=0；i

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

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

var i=0；
var total=长度；
对于（；这是我得到的印象。但是，对于当前的函数结构，我不确定将代码放置在何处以清除标记，主要是因为在使用新标记刷新之前如何获取当前标记？我认为我必须以不同的方式构造函数。添加了重写代码以帮助您理解我知道MarkerClusterer的工作是用标记填充地图，因此在定义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()
            });
        }
    });

}