Google 地图在集群点击时禁用缩放

Question

我有一张带有基于聚类标记的地图。我想要一种方法，当用户单击具有超过 100 个标记的群集时，不要放大并执行其他操作，就像我打开弹出窗口一样；否则只是分群。

在加载页面上，我正在调用服务并获取具有位置的客户列表。我将客户传递给聚类功能。现在，当用户单击集群时，我想设置一些条件。如果为真，则打开一个弹出窗口，但不要放大任何一个 decluster。我无法做到这一点。这是代码

Customers.html

<div [hidden]="!MapView" style="height: 100%" #map id="map"></div>

Customers.ts

    @ViewChild('map') mapElement: ElementRef;

    ngOnInit() {


            this.initMap();

        }

    initMap = () => {

            this._customerservice.GetCustomersWithLocations().subscribe(res => {

                if (res != null || res != undefined) {

                    this.CustomersLocation = res;

                    let latLng = new google.maps.LatLng(-31.563910, 147.154312);

                    let mapOptions = {
                        center: latLng,
                        zoom: 6,
                        mapTypeId: google.maps.MapTypeId.TERRAIN,
                        fullscreenControl: false
                    }

                    setTimeout(() => { // LOAD THE MAP FIRST
                        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
                    }, 1000);

                    setTimeout(() => { //LOAD THE CLUSTER
                        this.mapCluster.addCluster(res, this.map);
                    }, 3000);


                }

            }, error => {
            }, () => {
           });

    }

GoogleMapsCluster.ts

addCluster(Customers: any, map) {
    //console.log(Customers);

    if (google.maps) {

      //Convert locations into array of markers
      let markers = Customers.map((location) => {

        var marker = new google.maps.Marker({
          position: location.loc,
          label: location.name,
        });

        return marker;

      });

      this.markerCluster = new MarkerClusterer(map, markers, { imagePath: 'assets/m' });

      google.maps.event.addListener(this.markerCluster, 'clusterclick', (cluster) => {

        var markers = cluster.getMarkers();

        var CustomerInsideCluster = [];

        for (var i = 0; i < markers.length; i++) {
          CustomerInsideCluster.push({BusinessName: markers[i].label})
        }
        this.OpenCustomerDetails(CustomerInsideCluster);
        //I OPEN A POPUP HERE. I DONT WANT TO ZOOM IN TO DECLUSTER. AT THEN END IF THE CLUSTER HAS MORE THAN 100 CUSTOMERS I DONT WANT TO ZOOM IN WHEN I CLICK ON IT.
        //map.setZoom(8); GIVING ME ERROR

      });


    } else {
      console.warn('Google maps needs to be loaded before adding a cluster');
    }

  }
  OpenCustomerDetails(Customers: any) {
    let popover = this.popoverCtrl.create(MapPopover, { Customers: Customers }, { cssClass: 'custom-popover' });
    popover.present({
      ev: event
    });
  }

Answer 1

这是一个可能的解决方案。只需将 markerClusterer 属性 zoomOnClick 设置为 false。

var markerCluster = new MarkerClusterer(map, markers, { 
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
    zoomOnClick: false
  });

在您的 clusterclick 事件中，将 counter 对象传递给 callback function 并根据您的要求使用条件语句，打开 infowindow（否则如果你愿意的话）。

markerCluster.addListener('clusterclick', function(cluster){
      if (markers.length > 5){ // change #5 if you need to test different scenarions
            infowindow.setPosition(cluster.getCenter());
            infowindow.setContent("Simple Test");
            infowindow.open(map);

            }

如果标记小于或大于所需参数，请再次将zoomOnClick重置为true并使用以下map和clusterObject方法：

  else {
     markerCluster.zoomOnClick = true;
     map.fitBounds(cluster.getBounds());

        }

Proof of concept in this JSBIN

Google 地图在集群点击时禁用缩放

Google Maps Disable Zoom on Cluster Click

javascript

google-maps

markerclusterer