提交按鈕后標記聚類器不會刷新

Question

我正在開發一個頁面，其中有兩個部分：右側部分有一張地圖，左側部分有一個表單，當按下提交按鈕時，從中繪制幾個標記到地圖中（坐標取自數據庫）。 每當我按下提交按鈕時，所有標記都會被刪除，然后根據收集的數據重新繪制。 在此頁面中，我還使用了MarkerClusterer 。 我遇到的問題是標記被正確刪除，但MarkerClusterer保留在地圖中，重疊。

這是我編寫的刪除標記的函數：

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

      markers.length = 0;
}

這是按下提交按鈕時更新標記的函數：

function updateMarkers(dataMarkers){
                removeAllMarkers();

                for (i = 0; i < dataMarkers.length; i++) {
                    bounds.extend(new google.maps.LatLng(dataMarkers[i].latitude, dataMarkers[i].longitude));

                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(dataMarkers[i].latitude, dataMarkers[i].longitude),
                        map: map,
                        animation: google.maps.Animation.DROP,
                        //icon: new google.maps.MarkerImage(icon)
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent("<b>" + dataMarkers[i].name + "</b>" + "<br/> " 
                                                  + dataMarkers[i].street + "<br/> " 
                                                  + dataMarkers[i].code + " " + "<br/> "
                                                  + dataMarkers[i].city + " " + "<br/> "  
                                                  + dataMarkers[i].country);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));


                    markers.push(marker);
                  }
                  // Fit these bounds to the map
                  map.fitBounds(bounds);

                  clusterer = new MarkerClusterer(map, markers);
            }

MarkerClusterer庫是這樣導入的：

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>

我哪里做錯了？ 謝謝！！

Answer 1

解決方案可能是這樣的：

var clusterer = new MarkerClusterer(map);

function updateMarkers(dataMarkers) {
    removeAllMarkers();

    if (clusterer) {
        clusterer.clearMarkers();
    }

    // for loop to create markers....

    map.fitBounds();

    clusterer.addMarkers(markers);
}

Answer 2

使用 google.maps V3，您可以在地圖idle事件時調用此方法。

  refreshMarkerClusterer() {
    if (this.markerClusterer) {
        this.markerClusterer.clearMarkers();
        this.markers.forEach(marker => {
            this.markerClusterer.addMarker(marker);
        });
    }
  },

請注意this.markerClusterer和this.markers是已經初始化的全局變量，我在 foreach 中使用箭頭函數來避免綁定this 。