Googlemap API v3 - 我可以从Marker获取内容吗?

时间:2015-12-15 12:44:01

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

我创建了很多Marker,但我认为在获得用于做平均值的内容并设置infowindow click inside是markerCluster上所有Marker的平均值。

每个Marker必须给他一个价值。快照

Snapshot

我想抓住所有标记和平均值,并在infowindow中显示。快照:

Snapshot

这是我的代码:

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 个答案:

答案 0 :(得分:3)

  1. 将自定义属性添加到包含其“值”的标记:
  2. 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));
    }
    
    1. 创建在infowindow中显示的那些值的平均值:
    2.   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

      代码段

      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>