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。

标记聚类器在提交按钮后不会刷新

2 个答案: