дисплея числа маркеров в кластере в угловом Google Maps

Question

Я довольно новый для AngularJS и в настоящее время работаю с картами Google с http://angular-ui.github.io/angular-google-maps/

Я прошел через документацию, но все, что я хочу сделать, это показать числовые маркеры в кластере.

, а также OnClick кластера, всплывающее окно tooltext shoul будет отображаться. api не покрывает это. Пример того, что я хочу добиться здесь

http://104.131.42.57/frontend/index.html

А ниже мой текущий код:

HTML-директива

<div ng-controller="MapsController"> 
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds"> 
<ui-gmap-markers doCluster="true" clusterOptions="clusterOptions" models="puMarkers" coords="'self'" icon="'icon'"> 
</ui-gmap-markers> 
</ui-gmap-google-map> 

Карта контроллера, а затем документацию по API.

controllers.controller('MapsController', function($scope,mapService) { 
var locationArray ; 
$scope.map = { 
    center: { 
     latitude: 8.69128, 
     longitude: 8.5208073 
    }, 
    zoom: 6, 
    bounds: {} 
}; 
$scope.options = { 
    scrollwheel: false 
}; 

$scope.clusterOptions = { 
    gridSize: 60, 
    ignoreHidden: true, 
    minimumClusterSize: 5, 
    imageExtension: 'png', 
    imagePath: 'assets/img/cluster', 
    imageSizes: [72] }; 

var createRandomMarker = function(i, bounds, idKey,point) { 
    var ret = { 
     latitude: point.g, 
     longitude: point.f, 
     title: 'm' + i, 
     icon: 'assets/img/marker.png', 
     options: { title: point.t } 
    }; 
    ret[idKey] = i; 
    return ret; 
}; 

$scope.puMarkers = []; 
// Get the bounds from the map once it's loaded 
$scope.$watch(function() { 
    return $scope.map.bounds; 
}, function(nv, ov) { 
    // Only need to regenerate once 
    if (!ov.southwest && nv.southwest) { 
     var markers = []; 

     /* Load Markers from Rest Services*/ 
     var promise = mapService.getPollingUnits(1); 
     promise.success(function(retData,status,headers,config) { 
      if (retData.error == false) { 
       var i = 1 ; 
       locationArray = retData.events; 
       locationArray.forEach(function(item){ 
        markers.push(createRandomMarker(i, $scope.map.bounds, "id", item)); 
        i++; 
       }); 
      } 
     }); 
     $scope.puMarkers = markers; 
    } 
}, true); 
}); 

Answer 1

я, наконец, понять это. Количество маркеров в кластере уже было там, только черный цвет шрифта, который спрятал его, потому что значок маркера тоже был темным. Также отображается всплывающее окно при щелчке маркера уже имеющееся в документации.