MKMapview上的自定义绘图

Question

我正在制作地图应用，在这个应用中，我必须显示点之间的距离（开始，中间和结束）。我附上了现有应用的截图，我必须在地图上制作类似的线。

到目前为止，我尝试了两种不同的方法

使用 MKOverlay

- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id < MKOverlay >)overlay{
if(overlay==circle)
{
    MKCircleRenderer *renderer = [[MKCircleRenderer alloc] initWithCircle:overlay];
    renderer.lineWidth = 12;
    renderer.fillColor = [[UIColor blackColor] colorWithAlphaComponent:0.8];
    renderer.strokeColor = [UIColor whiteColor];

    return renderer;
}
MKPolylineRenderer *renderer = [[MKPolylineRenderer alloc] initWithPolyline:overlay];
if(overlay==backline)
{
    renderer.strokeColor = [[UIColor blackColor] colorWithAlphaComponent:0.85];
    renderer.fillColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
    renderer.lineWidth = 8.0;
    renderer.lineJoin = kCGLineJoinBevel;
}
else if(overlay==line)
{
    renderer.strokeColor = [[UIColor whiteColor] colorWithAlphaComponent:0.9];
    renderer.fillColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
    renderer.lineWidth = 6.0;
    renderer.lineJoin = kCGLineJoinBevel;
}


return renderer;

}

使用UIBezierPath

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(2, 100)];
[path addLineToPoint:CGPointMake(100, 100)];
[path addArcWithCenter:CGPointMake(100, 100) radius:15 startAngle:0 endAngle:2.0 * M_PI clockwise:YES];
[path addLineToPoint:CGPointMake(318, 100)];
[path closePath];
path.lineWidth = 8;
path.lineCapStyle = kCGLineCapButt;
[[UIColor blueColor] setStroke];
[path stroke];

但输出相同

使用MKOverlay创建白线，使用UIBezierPath创建蓝线。如您所见，线关节是可见的。我想让它看起来像第一个截图中的线。 请帮帮我。