显示具有标记针的混合颜色的群集

Question

我在谷歌地图API v3中有地图，我在地图上应用了群集。我已经能够应用群集的默认样式。但我想从标记的颜色更改群集图标。例如，我在簇下面有绿色和蓝色两种颜色的引脚，所以我想显示一个簇图标，根据其中的引脚数显示一个部分为绿色，剩余部分应根据簇数和所有颜色显示为蓝色这应该适用。

<script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      var script = '<script type="text/javascript" src="js/cluster';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>

    <script type="text/javascript">
      google.load('maps', '3', {
        other_params: 'sensor=false'
      });
      google.setOnLoadCallback(initialize);
      var markerClusterer = null;
      var map = null;
      var markers = new Array(); 
      function initialize() {
       var GPS = <%=GPS %>
       var map_center = new google.maps.LatLng(31.2330555556,72.3330555556);
      var myOptions = {
      zoom: 6,
      scaleControl:true,
      pancontrol: true,
      streetViewControl: true,
      center: map_center,
      mapTypeControl: true,
      mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }    
    map = new google.maps.Map(document.getElementById("map"), myOptions);
     var infowindow = new google.maps.InfoWindow(); 
          if (markerClusterer) {
          markerClusterer.clearMarkers();
        }        
        for(i=0; i<GPS.length; i++)
         { 
         var markerImage = new google.maps.MarkerImage(imageUrl,
          new google.maps.Size(24, 32));
         var imageUrl = 'ico/' + GPS[i].ICON;        
           markers[i] = new google.maps.Marker({
           position: GPS[i].GPS,
           draggable: true,
           icon: markerImage,
           Info: '<table frame=box><tr><td align="Left"><font face="Arial" size=2 color=#336699>Shop Name:</td><td align="Left"><font face="Arial" size=2>'+ GPS[i].SHOP + '</font></td></tr><tr>'+
          '<td align="Left"><font face="Arial" size=2 color=#336699>Owner:</td><td align="Left"><font face="Arial" size=2>'+ GPS[i].OWNER + '</font></td></tr>'+
          '<td align="Left"><font face="Arial" size=2 color=#336699>Mobile:</td><td align="Left"><font face="Arial" size=2>'+ GPS[i].MOBILE + '</font></td></tr>'+
          '<tr><td align="Left"><font face="Arial" size=2 color=#336699>Distributer:</td><td align="Left"><font face="Arial" size=2>'+ GPS[i].DIST + '</font></td></tr><tr>'+
          '<tr><td align="Left"><font face="Arial" size=2 color=#336699>Region:</td><td align="Left"><font face="Arial" size=2>'+ GPS[i].REGION + '</font></td></tr>'+
          '<tr><td align="Left"></td><td align="Left"><font face="Arial" size=2 color=#336699><a target=_blank href=http://221.120.216.52/elp/sfpl.php?ccode=01&amp;&regno='+ GPS[i].REGNO +'>View</a></td></tr>'+
          '</table>',
          title:GPS[i].SHOP + '(' +GPS[i].DIST + ')'
          });
          markers.push(markers);
          google.maps.event.addListener(markers[i], 'click', function() {
            infowindow.setContent(this.Info);
            infowindow.open(map,this);
            });   
        }
        zoom =  -1 ? null : -1;
        size =  -1 ? null : -1;
        markerClusterer = new MarkerClusterer(map, markers, {
          maxZoom: zoom,
          gridSize: size          
        });
      }
    </script>