Googlemap API v3 - 我可以从标记中获取内容吗？答案

【问题标题】：Googlemap API v3 - Can I get Content from Marker?Googlemap API v3 - 我可以从标记中获取内容吗？
【发布时间】：2016-03-21 06:25:41
【问题描述】：

我创建了很多 Marker，但我认为在获取它们的内容后用于做平均并设置 infowindow 点击里面是 markerCluster 上所有 Marker 的平均值。

每个标记都必须给他一个值。快照

我想抓取所有标记和平均值，并显示在信息窗口中。快照：

这是我的代码：

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);

});

【问题讨论】：

你的代码是什么样的？将其添加到问题中
@duncan 我添加我的代码！

标签： javascript google-maps-api-3 google-maps-markers markerclusterer

【解决方案1】：

向包含其“值”的标记添加自定义属性：

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));
}

创建这些值的平均值以显示在信息窗口中：

  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

代码 sn-p：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<div id="map-canvas"></div>

【讨论】：