如何在GoogleMaps iOS中更改群集标记的标题颜色和大小?

时间:2017-09-04 09:11:30

标签: ios google-maps

在我的情况下,群集客户图像是白色背景,我需要更改文本的颜色并使其更小

- (void)configureMap {
    // Set up the cluster manager with a supplied icon generator and renderer.
    id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
    id<GMUClusterIconGenerator> iconGenerator = [self iconGeneratorWithImages];
    id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:iconGenerator];

    _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView
                                                   algorithm:algorithm
                                                    renderer:renderer];
}

- (id<GMUClusterIconGenerator>)iconGeneratorWithImages {
    UIImage *clusterImage = [UIImage imageNamed:@"customClusterImage"];
    return [[GMUDefaultClusterIconGenerator alloc] initWithBuckets:@[@10, @50, @100, @200, @1000]
                                                  backgroundImages:@[clusterImage, clusterImage, clusterImage, clusterImage, clusterImage]
                                                  ];
}

look at the pic

UPD:这里没有答案:https://github.com/googlemaps/google-maps-ios-utils/issues/127

2 个答案:

答案 0 :(得分:1)

- (void)configureMapView {

    // ....

    id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
    id<GMUClusterIconGenerator> iconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
    GMUDefaultClusterRenderer *renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:iconGenerator];
    renderer.delegate = self; // <---- 1. set delegate

    _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView
                                                   algorithm:algorithm
                                                    renderer:renderer];
}

#pragma mark - <GMUClusterRendererDelegate>

- (void)renderer:(id<GMUClusterRenderer>)renderer willRenderMarker:(GMSMarker *)marker {

    if ([marker.userData isKindOfClass:[MyMarker class]]) {

        marker.icon = [UIImage imageNamed:@"markerNormal"] // <----- 2.1 icon for ordinary marker 

    } else if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {

        // <------ 2.2 icon for cluster marker (draw title on image)

        id<GMUCluster> userData = marker.userData;
        marker.icon = [self drawFront:[UIImage imageNamed:@"markerGroup"] text:[NSString stringWithFormat:@"%@", @(userData.count)]];
    }
}

#pragma mark - 

- (UIImage *)drawFront:(UIImage *)image text:(NSString *)text {

    // draw image first
    UIGraphicsBeginImageContextWithOptions(image.size, false, [UIScreen mainScreen].scale);
    [image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];

    // text attributes
    NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
    [style setAlignment:NSTextAlignmentCenter];

    NSDictionary *attr = @{NSParagraphStyleAttributeName : style,
                           NSFontAttributeName : [UIFont systemFontOfSize:17. weight:UIFontWeightRegular], // set text font  
                           NSForegroundColorAttributeName : [UIColor redColor] // set text color
                           };

    const CGFloat paddingTop = 8.;
    const CGRect rect = CGRectMake(0, paddingTop, image.size.width., image.size.height);

    [text drawInRect:rect withAttributes:attr];

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

答案 1 :(得分:1)

func renderer(_ renderer: GMUClusterRenderer, willRenderMarker marker: GMSMarker) {

    if let m = (marker.userData as? POIItem) {

        let vehicle = m.vehicle

        if m.isPlate {

            let label = UILabel(frame: CGRect(x: 0, y: 0, width: 0, height: 2))
            label.backgroundColor = .white
            label.textColor = .black
            label.text = " \(vehicle.plate) "
            label.layer.borderColor = UIColor.gray.cgColor
            label.layer.borderWidth = 1
            label.layer.cornerRadius = 4
            label.alpha = 0.9
            label.textAlignment = .center
            label.sizeToFit()

            marker.groundAnchor = CGPoint(x: 0.5, y: 0.1)
            marker.iconView = label

        } else {

            var icon = "\(vehicle.icon)"
            if icon == "1" {
                icon = "green/\(vehicle.angle)"
            }
            marker.icon = UIImage(named: icon)
        }

    }
    else {

        if let x = marker.userData as? GMUStaticCluster {

            let lbl = UILabel(frame: CGRect(x: 0, y: 0, width: 48, height: 48))
            lbl.text = "\(x.count)"
            lbl.textColor = .white
            lbl.textAlignment = .center
            lbl.backgroundColor = .red
            lbl.layer.cornerRadius = 24
            lbl.layer.masksToBounds = true

            marker.iconView = lbl

        }
    }
}