从标记集群获取标记信息

Question

I have pushed markers into the a markerClusterer. When I click on the markerClusterer I want to display the info of the nmarkers in the cluster. However, when I use the getMarkers() method, it does not give me the info that I stored in marker, only data about the marker itself. Is there any way that I can implement this? https://codesandbox.io/s/joey-gmaps-c5kdf

    const markerCluster = new MarkerClusterer(map, [],
      { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });

    google.maps.event.addListener(markerCluster, 'clusterclick', function (c) {
      console.log('Number of managed markers in cluster: ' + c.getSize());
      var m = c.getMarkers();
      for (i in m) {
        console.log(Object.values(m[i]));
        console.log(m[i].getTitle());
        console.log(m[i].toString());
      }
      var p = [];
      for (var i = 0; i < m.length; i++) {
        p.push(m[i]);
      }

    });

Answer 1

You can get your markers' information using getMarkers so there may be an issue somewhere in your code implementation that you haven't posted.

Try the following jsfiddle based off of Google's example .

JS code below:

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: -28.024,
      lng: 140.887
    }
  });

  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length],
      title: location.lat.toString() + "," + location.lng.toString(),
      myObj: { myKey: i }
    });
  });

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

  google.maps.event.addListener(markerCluster, 'clusterclick', function(c) {
    console.log('Number of managed markers in cluster: ' + c.getSize());
    var m = c.getMarkers();
    for (let i in m) {
      console.log(m[i].getLabel());
      console.log(m[i].getTitle());
      console.log(m[i].myObj.myKey);
    }
  });
}

var locations = [{
    lat: -31.563910,
    lng: 147.154312
  },
  {
    lat: -33.718234,
    lng: 150.363181
  },
  {
    lat: -33.727111,
    lng: 150.371124
  },
  {
    lat: -33.848588,
    lng: 151.209834
  },
  {
    lat: -33.851702,
    lng: 151.216968
  },
  {
    lat: -34.671264,
    lng: 150.863657
  },
  {
    lat: -35.304724,
    lng: 148.662905
  },
  {
    lat: -36.817685,
    lng: 175.699196
  },
  {
    lat: -36.828611,
    lng: 175.790222
  },
  {
    lat: -37.750000,
    lng: 145.116667
  },
  {
    lat: -37.759859,
    lng: 145.128708
  },
  {
    lat: -37.765015,
    lng: 145.133858
  },
  {
    lat: -37.770104,
    lng: 145.143299
  },
  {
    lat: -37.773700,
    lng: 145.145187
  },
  {
    lat: -37.774785,
    lng: 145.137978
  },
  {
    lat: -37.819616,
    lng: 144.968119
  },
  {
    lat: -38.330766,
    lng: 144.695692
  },
  {
    lat: -39.927193,
    lng: 175.053218
  },
  {
    lat: -41.330162,
    lng: 174.865694
  },
  {
    lat: -42.734358,
    lng: 147.439506
  },
  {
    lat: -42.734358,
    lng: 147.501315
  },
  {
    lat: -42.735258,
    lng: 147.438000
  },
  {
    lat: -43.999792,
    lng: 170.463352
  }
]

If eg you click on the blue cluster #3, you'll get the following output logged in the console:

Number of managed markers in cluster: 3
T
-42.734358,147.439506
U
-42.734358,147.501315
V
-42.735258,147.438

Edit: This error appears to be typescript related. There's a solution in related thread custom property with google marker in type script

Please try the code below:

for (var i = 0; i < features.length; i++) {
  const marker2 = new google.maps.Marker({
    position: features[i].position,
    icon: icons[features[i].type].icon,
    animation: google.maps.Animation.DROP,
    map: map
  });
  marker2.set("customInfo", features[i].location);
  console.log("Marker222223", marker2["customInfo"]);
  markerCluster.addMarker(marker2);
}

Hope this helps!

Answer 2

While creating markers add object into marker so that each marker will have asociated object with it ie customInfo

 var marker = new google.maps.Marker({
        position: accident_LatLng,
        title: accident_title,
        map: map,
        customInfo: object,


      });

to Access marker object use below code. I have created custom array to store marker object.

 var markers = cluster.getMarkers();
          var markerCustom = [];
          for (var i = 0; i < markers.length; i++) {
            markerCustom.push(cluster.markers_[i].customInfo)
          }

Hope this helps

Reference https://medium.com/@sunil.jadhav38/implementing-marker-clustering-is-angular-using-google-charts-6b62a33f3b61