Question

我开始在项目中使用MapBox。当我使用自定义图像添加注释时，它不是居中对齐的。它看起来比原始引脚稍微低一点。是否可以更改注释图像的中心点？

应该如何：

现在的情况：

- (MGLAnnotationImage *)mapView:(MGLMapView *)mapView imageForAnnotation:(id <MGLAnnotation>)annotation {
    MGLAnnotationImage *annotationImage = [mapView dequeueReusableAnnotationImageWithIdentifier:@"driverPinId"];

    if (!annotationImage) {
        UIImage *image = [UIImage imageNamed:@"DriverPin"];
        annotationImageWithImage:image reuseIdentifier:@"driverPinId"];
    }

    return annotationImage;
}

Answer 1

您应该使用MGLAnnotationView代替MGLAnnotationImage，因为MGLAnnotationView a descendant of UIView因此您可以像普通UIView一样添加任何内容。

func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
    guard annotation is MGLPointAnnotation else {
        return nil
    }
    guard let castAnnotation = annotation as? MapPointMarker else {
        return nil
    }
    if (!castAnnotation.willUseImage) {
        return nil;
    }

    let identifier = castAnnotation.imageName!
    var image: UIImage = UIImage(named: castAnnotation.imageName!)!

    var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)

    if annotationView == nil {
        annotationView = MGLAnnotationView(annotation: annotation, reuseIdentifier: identifier)
        let imageView = UIImageView(image: image)
        annotationView!.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)
        annotationView?.addSubview(imageView)
        annotationView?.centerOffset = CGVector(dx: 0, dy: -image.size.height / 2.0)
    }

    return annotationView
}

在上面的代码片段中，我将UIImageView添加到annotationView并使用annotationView?.centerOffset = CGVector(dx: 0, dy: -image.size.height / 2.0)向上移动图像。

希望得到这个帮助。

Answer 2

您只需根据图像尺寸调整MKAnnotationView的中心偏移。

修改：you can also check the MapBox Document Example and description here

正如文件所说：

- (MGLAnnotationImage *)mapView:(MGLMapView *)mapView imageForAnnotation:(id <MGLAnnotation>)annotation
{
    // Try to reuse the existing ‘pisa’ annotation image, if it exists
    MGLAnnotationImage *annotationImage = [mapView dequeueReusableAnnotationImageWithIdentifier:@"pisa"];

    // If the ‘pisa’ annotation image hasn‘t been set yet, initialize it here
    if ( ! annotationImage)
    {
        // Leaning Tower of Pisa by Stefan Spieler from the Noun Project
        UIImage *image = [UIImage imageNamed:@"pisavector"];

        // The anchor point of an annotation is currently always the center. To
        // shift the anchor point to the bottom of the annotation, the image
        // asset includes transparent bottom padding equal to the original image
        // height.
        //
        // To make this padding non-interactive, we create another image object
        // with a custom alignment rect that excludes the padding.
        image = [image imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, 0, image.size.height/2, 0)];

        // Initialize the ‘pisa’ annotation image with the UIImage we just loaded
        annotationImage = [MGLAnnotationImage annotationImageWithImage:image reuseIdentifier:@"pisa"];
    }

    return annotationImage;
}

Answer 3

您只需要通过将图像的高度加倍来调整图像。我查了一下，效果很好。

// Adjust image by doubling the height of the image
- (UIImage *)adjustImage:(UIImage *)image {

    CGSize newSize = CGSizeMake(image.size.width, image.size.height * 2);
    UIGraphicsBeginImageContextWithOptions(newSize, false, 0);

    [image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];
    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return newImage;
}

- (MGLAnnotationImage *)mapView:(MGLMapView *)mapView imageForAnnotation:(id <MGLAnnotation>)annotation {
    MGLAnnotationImage *annotationImage = [mapView dequeueReusableAnnotationImageWithIdentifier:@"driverPinId"];

    if (!annotationImage) {
        UIImage *image = [UIImage imageNamed:@"DriverPin"];

        // The anchor point of an annotation is currently always the center. To
        // shift the anchor point to the bottom of the annotation, the image
        // asset includes transparent bottom padding equal to the original image
        // height.
        image = [self adjustImage: image];

        // To make this padding non-interactive, we create another image object
        // with a custom alignment rect that excludes the padding.
        image = [image imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, 0, image.size.height/2, 0)];

        // Initialize the ‘DriverPin’ annotation image with the UIImage we just loaded.
        annotationImage = [MGLAnnotationImage annotationImageWithImage:image reuseIdentifier:@"driverPinId"];
    }

    return annotationImage;
}

Mapbox注释图像居中

3 个答案: