Googlemap API v3 - Can I get Content from Marker?

问题:

I created a lot of a Marker but I think after obtaining their content used to do average and set infowindow click inside is the average of all Marker on markerCluster.

Each Marker has to give him a value. snapshot

---

I want to grab all marker and average , and displayed in infowindow. Snapshot:

here is my Code:

var locations = [
 ['100', 22.75853,121.14886, 1],
 ['90', 22.7586,121.14891, 2],
 ['80', 22.75857,121.1488, 3],
 ['70', 22.75844,121.14887, 4],
 ['60', 25.08389,121.57796, 5],
 ['50', 22.75839,121.14891, 6],
 ['40', 22.75831,121.14912, 7],
 ['30', 22.75838,121.14904, 8],
 ['20', 22.75856,121.14867, 9],
 ['10', 25.08229,121.57822, 10]];
var mapOptions = {
center: new google.maps.LatLng(25.048215, 121.517123), 
zoom: 7 
};
 var map = new google.maps.Map(document.getElementById('map-   canvas'),mapOptions);
var infowindow = new google.maps.InfoWindow;
var markers=[];
for (var i = 0; i < locations.length; i++) {  
var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({ position: latLng });
markers.push(marker);

google.maps.event.addListener(marker, 'click', (function(marker, i) {
     return function() {
         infowindow.setContent(locations[i][0]);
         infowindow.open(map, marker);
     }
})(marker, i));


}
var clusterOptions = { zoomOnClick: false };
var markerCluster = new MarkerClusterer(map, markers,clusterOptions);

google.maps.event.addListener(markerCluster, 'clusterclick',         function(cluster) {
var content = '';
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);

var allmarke = cluster.getMarkers();

var titles = "";

for(var i = 0; i < allmarke.length; i++) {
 titles = "put avage in here";
}                                        

infowindow.close();
infowindow.setContent(titles); 
infowindow.open(map, info);

});

回答1:

1. add a custom property to the marker containing its "value":

for (var i = 0; i < locations.length; i++) {
  var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
  var marker = new google.maps.Marker({
    position: latLng,
    _myValue: locations[i][0]  // <-- custom property
  });
  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

2. create the average of those values for display in the infowindow:

  var total = 0;
  for (var i = 0; i < allmarke.length; i++) {
    total += parseFloat(allmarke[i]._myValue);
  }
  titles = "avg " + (total / (allmarke.length)).toFixed(2);

  infowindow.close();
  infowindow.setContent(titles);
  infowindow.open(map, info);

proof of concept fiddle

code snippet:

var locations = [
  ['100', 22.75853, 121.14886, 1],
  ['90', 22.7586, 121.14891, 2],
  ['80', 22.75857, 121.1488, 3],
  ['70', 22.75844, 121.14887, 4],
  ['60', 25.08389, 121.57796, 5],
  ['50', 22.75839, 121.14891, 6],
  ['40', 22.75831, 121.14912, 7],
  ['30', 22.75838, 121.14904, 8],
  ['20', 22.75856, 121.14867, 9],
  ['10', 25.08229, 121.57822, 10]
];
var mapOptions = {
  center: new google.maps.LatLng(25.048215, 121.517123),
  zoom: 7
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow;
var markers = [];
for (var i = 0; i < locations.length; i++) {
  var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
  var marker = new google.maps.Marker({
    position: latLng,
    _myValue: locations[i][0]
  });
  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

var clusterOptions = {
  zoomOnClick: false,
  imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
};
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
  var content = '';
  var info = new google.maps.MVCObject;
  info.set('position', cluster.center_);

  var allmarke = cluster.getMarkers();

  var titles = "";

  var total = 0;
  for (var i = 0; i < allmarke.length; i++) {
    total += parseFloat(allmarke[i]._myValue);
  }
  titles = "avg " + (total / (allmarke.length)).toFixed(2);

  infowindow.close();
  infowindow.setContent(titles);
  infowindow.open(map, info);

});

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map-canvas"></div>